☰ INDEX
APGAR & Primitive Reflexes
Acyanotic CHD
Antenatal Hydronephrosis & Hemolytic Uremic Syndrome
Asthma
Ataxia Neurodegenerative Disorders
Bacterial Infections
Cerebral Palsy, Brain Tumor & Neurocutaneous Disorders
Classification of Congenital Heart Diseases
Congenital Infections & Covid19
Congenital Nephrotic Syndrome & AKI (ARF)
Croup & Choanal Atresia
Cyanotic CHD
Cystic Fibrosis, Pneumonia & ARDS
Disorders Of Carbohydrate Metabolism
Disorders Of Protein Metabolism
Esophageal Disorders & Foreign Body Ingestion
Fetal Circulation
General Neonatology
Growth & Puberty
Growth Assessment
Hyaline Membrane Disease & TTNB
Hydrocephalus
Hypertrophic Pyloric Stenosis & Hirschsprung Disease
IBD, Diarrhea & Dehydration Management
Immunization Basics, Types & Immunization Schedules
Infants of Diabetic Mothers, Neonatal Sepsis & Benign Lesions
Intellectual Disability, NTD & Craniosynostosis
Juvenile Idiopatic Arthritis
Laryngomalacia & Bronchiolar Disorders
Leukemia
Lysosomal Storage Disorders, Peroxisomal Disorders & Leukodystrophy
Malabsorption, Celiac Disease & Liver Disorders
Management of Severe Acute Malnutrition
Metabolic Disorders
Milestones, Breast Milk & Behavioral Disorders
Nada Criteria
Neonatal Jaundice
Neonatal Resuscitation
Neuroblastoma, LCH & Retinoblastoma
Neuromuscular Disorders
Other Breathing Disorders in Newborns
Perinatal Asphyxia & NEC
Preterm (IUGR)
Rheumatic Fever, RHD & Heart Failure
SLE, Juvenile Dermatomyositis & Scleroderma
Seizures, Epilepsy & Meningitis
Short Stature
Specific Vaccines, Vaccines in Special Situations & Cold Storage of Vaccines
Transient Myeloproliferative Disorder & Lymphoma (Hl, NHL)
UTI, VUR, PUV & Uretrocele
Vasculitis in Childhood
Viral Infections
Vitamin Deficiencies
Wilm's Tumor & Congenital Renal Cysts
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 16 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "What is the daily feed requirement for a 1.4 kg baby who is hemodynamically stable on day 1?", "options": [{"label": "A", "text": "60ml/kg/day", "correct": false}, {"label": "B", "text": "80ml/kg", "correct": true}, {"label": "C", "text": "100ml/kg", "correct": false}, {"label": "D", "text": "150ml/kg", "correct": false}], "correct_answer": "B. 80ml/kg", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>80ml/kg Very low birth weight(VLBW) infants ( &lt; 1500 g) need about 80 mL/kg fluids on the first day of life It needs to increase by 10-15 mL/kg/day to a maximum of 160 mL/kg/ day by the end of the first week.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What will be the initial choice of feeding method for a stable 32 weeks preterm baby?", "options": [{"label": "A", "text": "Nasogastric (NG) feeds", "correct": false}, {"label": "B", "text": "Oral paladai feeding", "correct": true}, {"label": "C", "text": "Direct breastfeeding", "correct": false}, {"label": "D", "text": "IV fluids", "correct": false}], "correct_answer": "B. Oral paladai feeding", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Oral paladai feeding Breastfeeding requires effective sucking, swallowing and proper coordination between sucking/swallowing and breathing These complex skills mature with increasing gestation. A robust sucking pattern is not present until 32- 34 weeks gestation. Coordination between sucking, swallowing and breathing does not mature until 34 weeks of gestation and it fully matures by 37 to 38 weeks of gestation. The choice of initial feeding method At different gestational ages are &lt; 28 weeks - IV fluids 28- 31 weeks- NG/OG feeds 32-34 weeks - oral feeds by spoon or palladia &gt; 34 weeks - Direct breastfeeding</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The coordination between sucking, swallowing and breathing fully matures by what gestational age?", "options": [{"label": "A", "text": "32 weeks", "correct": false}, {"label": "B", "text": "34 weeks", "correct": true}, {"label": "C", "text": "36 weeks", "correct": false}, {"label": "D", "text": "38 weeks", "correct": false}], "correct_answer": "B. 34 weeks", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>34 weeks A robust sucking pattern is not present until 32- 34 weeks gestation. Coordination between sucking, swallowing and breathing does not mature until 34 weeks of gestation and it fully matures by 37 to 38 weeks of gestation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the amount of milk that can be initiated as trophic feeds in a stable preterm baby?", "options": [{"label": "A", "text": "15ml/kg/day", "correct": false}, {"label": "B", "text": "5ml/kg/day", "correct": false}, {"label": "C", "text": "10ml/kg/day", "correct": true}, {"label": "D", "text": "20m/kg/day", "correct": false}], "correct_answer": "C. 10ml/kg/day", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>10ml/kg/day Trophic feeds are amounts of feed approx 10ml/kg/day to initiate maturity of the gut mucosa.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is not a component of the APGAR score?", "options": [{"label": "A", "text": "Heart rate", "correct": false}, {"label": "B", "text": "Respiratory rate", "correct": true}, {"label": "C", "text": "Grimace", "correct": false}, {"label": "D", "text": "Tone", "correct": false}], "correct_answer": "B. Respiratory rate", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Respiratory rate Respiration is a component of the Appearance, Pulse, Grimace, Activity, and Respiration(APGAR) score, not respiratory rate. Appearance, Pulse, Grimace, Activity, and Respiration (APGAR) scores are being Appearance Pulse rate ( heart rate) Grimace Activity (tone) Respiration</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following primitive reflexes is not present at birth?", "options": [{"label": "A", "text": "Moro’s reflex", "correct": false}, {"label": "B", "text": "Asymmetric tonic neck reflex", "correct": false}, {"label": "C", "text": "Parachute reflex", "correct": true}, {"label": "D", "text": "Grasp reflex", "correct": false}], "correct_answer": "C. Parachute reflex", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Parachute reflex Parachute reflex develops 6-9 months after birth and persists till death. Moro's, Asymmetric tonic neck reflex (ATNR) , and grasp reflex are present at birth.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A normal Moro response consists of all of the following except:", "options": [{"label": "A", "text": "Symmetric extension and abduction of the upper limb", "correct": false}, {"label": "B", "text": "Flexion of the upper limb", "correct": false}, {"label": "C", "text": "Audible cry", "correct": false}, {"label": "D", "text": "Flexion of lower limb", "correct": true}], "correct_answer": "D. Flexion of lower limb", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Flexion of lower limb The Moro reflex is an infantile reflex that develops between 28-32 weeks of gestation and disappears between 3-6 months of age. It is a response to a sudden loss of support and involves three distinct c omponents: Symmetric extension and abduction of the fingers and upper extremities followed by Flexion of the upper extremities. An audible cry.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An intern is newly posted to the labour room. As the resident in charge, you train her on basic neonatal resuscitation. Which of the following is true about the APGAR scoring system ?", "options": [{"label": "A", "text": "Commonly performed at 2 minutes and at 5 minutes after birth.", "correct": false}, {"label": "B", "text": "APGAR score is not useful in deciding initial resuscitation at birth", "correct": true}, {"label": "C", "text": "Each of the 5 things in APGAR is scored from 1 to 3 and the maximum score is 15.", "correct": false}, {"label": "D", "text": "Extended APGAR scores must be obtained every 10 minutes up to 20 minutes if 5 minutes APGAR score is less than 7.", "correct": false}], "correct_answer": "B. APGAR score is not useful in deciding initial resuscitation at birth", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>APGAR score is not useful in deciding initial resuscitation at birth APGAR scoring is performed at 1 minute and 5 minutes after birth. However, resuscitation must be initiated before a 1-minute score is assigned. Hence</p>\n<p><strong>Highyeild:</strong></p><p>APGAR score is not used to guide the resuscitation, but sequential scores are used to monitor how well the baby is responding to resuscitative efforts.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. APGAR score is done at 1 minute and 5 minutes after birth Option: C. Each Appearance, Pulse, Grimace, Activity, and Respiration is scored on a scale of 0 to 2 and hence the maximum score is 10. Option: D. If 5 minutes APGAR score is less than 7, extended APGAR scores must be obtained every 5 minutes up to 20 minutes. APGAR Evaluation of newborn infants SIGN 0 1 2 Heart rate Absent Below 100 Over 100 Respiratory effort Absent Slow, irregular Good, crying Muscle tone Limp Some flexion Active motion Reflex* No response Grimace Cough or sneeze Color Blue, Pale Body pink, Extremities blue Completely pink 7 to 10 is normal 4 to 6 is moderately depressed 0 to 3 needs immediate resuscitation</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "While posted in the labour room, you were asked to assess a just-born neonate. The baby has a heart rate of 80 beats per minute, weak cry, active body movements, grimaces and looks completely pink. What APGAR score would you assign?", "options": [{"label": "A", "text": "5", "correct": false}, {"label": "B", "text": "8", "correct": false}, {"label": "C", "text": "6", "correct": false}, {"label": "D", "text": "7", "correct": true}], "correct_answer": "D. 7", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>7 APGAR Evaluation of newborn infants SIGN 0 1 2 Heart rate Absent Below 100 Over 100 Respiratory effort Absent Slow, irregular Good, crying Muscle tone Limp Some flexion Active motion Reflex* No response Grimace Cough or sneeze Color Blue, Pale Body pink, Extremities blue Completely pink 7 to 10 is normal 4 to 6 is moderately depressed 0 to 3 needs immediate resuscitation In this question, baby has: Heart rate &lt; 100 bpm: 1; Weak cry: 1; Active body movements: 2; Grimace reflex: 1; Colour completely pink: 2. Therefore, total score= 7. Option A &amp; C. APGAR score of &lt; 7 is not good and needs active intervention. Option B &amp; D. APGAR score of 7 to 10 is normal. But a score of 10 is very unusual as at birth baby has peripheral cyanosis</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An outside-delivered newborn baby is brought to the triage labour room. On initial assessment, the baby has a weak cry, a heart rate of 90 beats per minute, only some flexion movements, blue extremities, and coughs when nostrils are irritated with a catheter. The respiratory efforts of this baby are slow and irregular. What APGAR score would you assign?", "options": [{"label": "A", "text": "5", "correct": false}, {"label": "B", "text": "8", "correct": false}, {"label": "C", "text": "6", "correct": true}, {"label": "D", "text": "7", "correct": false}], "correct_answer": "C. 6", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>6 APGAR Evaluation of newborn infants SIGN 0 1 2 Heart rate Absent Below 100 Over 100 Respiratory effort Absent Slow, irregular Good, crying Muscle tone Limp Some flexion Active motion Reflex* No response Grimace Cough or sneeze Color Blue, Pale Body pink, Extremities blue Completely pink 7 to 10 is normal 4 to 6 is moderately depressed 0 to 3 needs immediate resuscitation In this question, baby has: Heart rate &lt; 100 bpm: 1; Weak cry: 1; Active body movements: 2; Grimace reflex: 1; Colour completely pink: 2. Therefore, total score= 7. Option: A &amp; C. APGAR score of &lt; 7 is not good and needs active intervention. Option: B &amp; D. APGAR score of 7 to 10 is normal. But a score of 10 is very unusual as at birth baby has peripheral cyanosis</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "During your rounds in the postnatal ward, you assess the neurological development of the baby by eliciting primitive reflexes. Which of the following is not a primitive reflex?", "options": [{"label": "A", "text": "Rooting reflex", "correct": false}, {"label": "B", "text": "Moro reflex", "correct": false}, {"label": "C", "text": "Galant reflex", "correct": false}, {"label": "D", "text": "Hoffmann’s reflex", "correct": true}], "correct_answer": "D. Hoffmann’s reflex", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hoffmann’s reflex Primitive reflexes are CNS reflexes present in healthy neonates which disappear within the first year of life.</p>\n<p><strong>Highyeild:</strong></p><p>Hoffmann’s reflex is not a primitive reflex and it involves loosely holding the middle finger and flicking the fingernail downward, allowing the middle finger to flick upward reflexively. A positive response is seen when there is flexion and adduction of the thumb on the same hand.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Rooting reflex: When the cheek of the baby is stroked, the head moves towards the same side as if seeking the nipple. It disappears in 4 months. Option: B. Moro reflex: When the head of the baby is suddenly dropped about the trunk, the response consists of the opening of the hands and extension and abduction of the upper extremities followed by anterior flexion of the upper extremities followed by an audible cry. It disappears in 3-6 months Option: C. Galant reflex: When the infant is suspended in a face-down position, stroking along one side of the spine causes lateral flexion of the lower body towards the stimulated side.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "As a resident doctor, you are asked to examine the neurological status of the babies in the NICU. While eliciting Moro's reflex on a neonate, you observe that the baby showed the first part of the reflex but did not show the second part. Based on this finding, what would be the gestational age of the neonate?", "options": [{"label": "A", "text": "28-32 weeks", "correct": false}, {"label": "B", "text": "32-36 weeks", "correct": true}, {"label": "C", "text": "Term gestation", "correct": false}, {"label": "D", "text": "&lt; 28 weeks", "correct": false}], "correct_answer": "B. 32-36 weeks", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1690957683049-QTDK014014IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>32-36 weeks Moro’s reflex is a primitive reflex . When the head of the baby is suddenly dropped about the trunk, the response consists of the opening of the hands and extension and abduction of the upper extremities followed by anterior flexion of the upper extremities followed by an audible cry. It disappears in 3-6 months. The hand opening is present by 28 weeks, extension and abduction by 32 weeks, and anterior flexion by 37 weeks.</p>\n<p><strong>Highyeild:</strong></p><p>The question hints that the baby is in NICU which might be due to its prematurity. As the baby showed extension and abduction of the upper extremities but did not show anterior flexion, the baby’s gestational age would be between 32 and 37 weeks.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. In this case, the baby would have been able to open his hands not associated with abduction and extension of the upper extremity. Option: C. By term gestation, the baby would be able to show complete Moro’s reflex . Option: D. Moro’s reflex would be completely absent in this case.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "While performing the Moro reflex in a neonate, you observe the following: What is your interpretation?", "options": [{"label": "A", "text": "Premature neonate", "correct": false}, {"label": "B", "text": "Normal response", "correct": false}, {"label": "C", "text": "Brachial plexus injury", "correct": true}, {"label": "D", "text": "Hypoxic encephalopathy", "correct": false}], "correct_answer": "C. Brachial plexus injury", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883243257-QTDK014015IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Brachial plexus injury The image shows asymmetrical Moro’s reflex which is also known as the startle reflex.</p>\n<p><strong>Highyeild:</strong></p><p>Notice that the right upper limb did not abduct and extend. The causes of asymmetric Moro’s reflex are brachial plexus injury or collar bone fracture on the same side.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. In a premature neonate, Moro’s reflex would either be absent or incompletely present depending on the gestational age but it would never be asymmetrical. The hand opening is present by 28 weeks , extension and abduction by 32 weeks , and anterior flexion by 37 weeks. Option: B . Asymmetrical Moro’s reflex can never be a normal response Option: D. In the case of Hypoxic Ischaemic Encephalopathy, Moro’s reflex will show a long latent period and no asymmetry. The long latency interval of Moro response could be a valuable clinical sign to screen for neurological impairment in HIE.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "While assessing the neurological status of neonates in post-natal wards, a paediatrician elicits the following reflex. Which of the following is true about this reflex?", "options": [{"label": "A", "text": "Normally this reflex is not followed by a cry.", "correct": false}, {"label": "B", "text": "It disappears by 5-6 months of age", "correct": true}, {"label": "C", "text": "The hand opening is present by 24 weeks of gestation.", "correct": false}, {"label": "D", "text": "Asymmetry in this reflex is seen in hypoxic ischaemic encephalopathy.", "correct": false}], "correct_answer": "B. It disappears by 5-6 months of age", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1725358336211-photos-1725270865102-QTDK014016IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>It disappears by 5-6 months of age As it is a primitive reflex, it disappears in 3-6 months.</p>\n<p><strong>Highyeild:</strong></p><p>All primitive reflexes disappear by 1 year of age due to inhibition by the frontal lobe . Therefore, frontal lobe lesions in adults can cause these primitive reflexes to come back.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. The image shows Moro’s reflex or Startle reflex. When the head of the baby is suddenly dropped in relation to the trunk, the response consists of the opening of the hands and extension and abduction of the upper extremities followed by anterior flexion of the upper extremities followed by an audible cry. Option: C. The hand opening is present by 28 weeks , extension and abduction by 32 weeks, and anterior flexion by 37 weeks. Option: D. Asymmetrical Moro’s reflex is seen in brachial plexus injury. In HIE, a long latent period is seen in Moro’s reflex.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "As part of the neurological examination of neonates in the NICU, the following reflex was elicited by the pediatric professor. Which of the following is true about this reflex?", "options": [{"label": "A", "text": "Image shows Galant reflex", "correct": false}, {"label": "B", "text": "This reflex is present at 28 weeks of gestation", "correct": true}, {"label": "C", "text": "This reflex diminishes by 2 months", "correct": false}, {"label": "D", "text": "All of the above", "correct": false}], "correct_answer": "B. This reflex is present at 28 weeks of gestation", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883244273-QTDK014017IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>This reflex is present at 28 weeks of gestation The image shown here is of a palmar grasp. It is present at 28 weeks and is strong by 32 weeks.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Galant reflex: When the infant is suspended in a face-down position, stroking along one side of the spine causes lateral flexion of the lower body towards the stimulated side. Option: C. This reflex diminishes by 4 months because this is the age when the baby develops voluntary grasping.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A primigravida woman in active labour is brought to the hospital. On examination, you find that the fetal heart rate is non-reassuring, probably due to the prolonged second stage of labour. The consultant decided to perform forceps delivery. The Baby was delivered successfully. However, you are concerned about damaging the brachial plexus in the baby. Which of the following can help in confirming the suspicion ?", "options": [{"label": "A", "text": "Startle reflex", "correct": true}, {"label": "B", "text": "Galant reflex", "correct": false}, {"label": "C", "text": "Plantar reflex", "correct": false}, {"label": "D", "text": "Rooting reflex", "correct": false}], "correct_answer": "A. Startle reflex", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Startle reflex Forceps delivery can cause brachial plexus injury in the newborn. Among the given options, Moro’s reflex also known as the Startle reflex can help in the diagnosis of brachial plexus injury. In brachial plexus palsy, asymmetric Moro’s reflex is seen.</p>\n<p><strong>Highyeild:</strong></p><p>Asymmetric tonic neck reflex might also help in the diagnosis of the same as this reflex involves the extension of ipsilateral arms with flexion of contralateral arms .</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Galant reflex: When the infant is suspended in a face-down position, stroking along one side of the spine causes lateral flexion of the lower body towards the stimulated side. Option: C. Plantar reflex. Plantar stimulation shows dorsiflexion of the great toe and fanning of other toes. (Similar to Babinski sign in adults due to UMN lesion). Option: D. Rooting reflex. When the cheek of the baby is stroked, the head moves towards the same side.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 26 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 15 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Baby of Lata, a newborn baby delivered at 31 weeks of gestation, was admitted to the Neonatal intensive care unit(NICU) for Low birth weight (LBW) care. On the 5th day of life, the child had an apnea episode. On clinical examination, there was no pallor, but auscultation revealed a continuous murmur, and S2 was paradoxically split. An ECG was ordered, which showed left ventricular predominance. What would be the most likely diagnosis?", "options": [{"label": "A", "text": "Ventricular septal defect", "correct": false}, {"label": "B", "text": "Eissenmenger syndrome", "correct": false}, {"label": "C", "text": "Ostium primum ASD", "correct": false}, {"label": "D", "text": "Patent ductus arteriosus", "correct": true}], "correct_answer": "D. Patent ductus arteriosus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Patent ductus arteriosus Patent ductus arteriosus (PDA) is a communication between the pulmonary artery and the aorta and is most often distal to the subclavian artery.</p>\n<p><strong>Highyeild:</strong></p><p>A patent ductus arteriosus results in a shunt from the aorta to the pulmonary artery. Since there is overloading of the pulmonary artery both during systole and diastole, it results in a continuous murmur. Management- In preterm infants, Indomethacin is most commonly used. In-term babies will require surgical closure.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Baby of Lata, a newborn baby delivered at 31 weeks of gestation, was admitted to the Neonatal intensive care unit(NICU) for Low birth weight(LBW) care. On 5th day of life, the child had an episode of apnoea. On clinical examination, there was no pallor, but auscultation revealed a continuous murmur, and S2 was paradoxically split. An ECG was ordered, which showed left ventricular predominance. Which of the following drugs may be useful in the medical management of this baby?", "options": [{"label": "A", "text": "Prostaglandin E1", "correct": false}, {"label": "B", "text": "Caffeine", "correct": false}, {"label": "C", "text": "Indomethacin", "correct": true}, {"label": "D", "text": "Cannot be managed medically.", "correct": false}], "correct_answer": "C. Indomethacin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Indomethacin The diagnosis here is Patent ductus arteriosus (PDA). PDA is a connection between the pulmonary artery and the aorta and is most often distal to the subclavian artery. The Ductus arteriosus closes soon after birth, and its persistence is called PDA.</p>\n<p><strong>Highyeild:</strong></p><p>Management includes indomethacin (dose: 0.2mg/kg/dose given orally every 12-24 hours for three doses for a baby &lt; 48 hours and 0.25 mg/kg/dose for babies &gt; 7 days) Ibuprofen may be used alternatively. Furosemide and digoxin are used in heart failure following Congestive heart failure (CHF) due to Patent ductus arteriosus (PDA). Prostaglandin E1 is used to keep the ductus open, which is helpful in congenital heart lesions dependent on ductal circulation. Caffeine may be used in apnea of prematurity.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The mother of an infant presents to the clinic with complaints of reduced breastfeeding and excessive forehead sweating. The chest radiograph showed an enlarged cardiac shadow. Further investigation showed that the baby had patent ductus arteriosus (PDA). Which of the following is true regarding this condition?", "options": [{"label": "A", "text": "Patients with PDA develop congestive cardiac failure around 6-10 years of life.", "correct": false}, {"label": "B", "text": "Left-to-right flow occurs only during systole", "correct": false}, {"label": "C", "text": "ECG shows left axis deviation early in life", "correct": false}, {"label": "D", "text": "Aortic attachment of the ductus arteriosus is distal to the left subclavian artery.", "correct": true}], "correct_answer": "D. Aortic attachment of the ductus arteriosus is distal to the left subclavian artery.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Aortic attachment of the ductus arteriosus is distal to the left subclavian artery. PDA is a communication between the pulmonary artery and the aorta .</p>\n<p><strong>Highyeild:</strong></p><p>Aortic attachment of the ductus arteriosus is distal to the left subclavian artery . Therefore, differential cyanosis is seen when pulmonary artery hypertension develops because If Aorta is involved distal to the left subclavian artery- It can result in only that-sided cyanosis or asymmetrical symptoms.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options :- Option. A . Infants with PDA develop CCF around 6-10 weeks after birth. Option. B . Left to proper flow in the ductus arteriosus occurs during systole and diastole as a pressure gradient is maintained throughout the cardiac cycle between the two great arteries. Remember that in PDA, the continuous murmur is heard. Option. C . ECG shows a normal axis with left ventricular dominance or hypertrophy.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-month-old infant with a known case of patent ductus arteriosus is brought to the hospital for surgical ligation. However, examination shows cyanosis in the toes but not in the fingers. Seeing this, the surgeon declared the case inoperable. What is the reason behind the differential cyanosis?", "options": [{"label": "A", "text": "Congestive Cardiac Failure", "correct": false}, {"label": "B", "text": "Pulmonary Arterial Hypertension", "correct": true}, {"label": "C", "text": "Lutembacher syndrome", "correct": false}, {"label": "D", "text": "Coronary Arteriovenous fistula", "correct": false}], "correct_answer": "B. Pulmonary Arterial Hypertension", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pulmonary Arterial Hypertension Here, the infant shows differential cyanosis, which is seen when pulmonary arterial hypertension develops in PDA patients. If Aorta is involved distal to the left subclavian artery- It can result in only that-sided cyanosis or asymmetrical symptoms.</p>\n<p><strong>Highyeild:</strong></p><p>It leads to the right to left shunt directing the deoxygenated blood directly into the descending aorta. This is because the aortic attachment of the ductus arteriosus is distal to the left subclavian artery. Patients with PDA develop pulmonary arterial hypertension earlier than VSD.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A . Congestive Cardiac Failure is a common complication of PDA and develops around 6-10 weeks of life, but it’s not directly related to the reversal of shunt flow. Option: C &amp; D. Small Atrial Septal Defect associated with mitral stenosis is known as Lutembacher syndrome . This and coronary arteriovenous fistula are differential diagnoses of PDA as they may show continuous murmur. They have no role in the reversal of shunt.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-month-old infant, a known case of patent ductus arteriosus, is brought to the pediatrician with features suggestive of congestive cardiac failure. The pediatrician explains to the parents that large shunts result in congestive cardiac failure. Which of the following factors are directly proportional to the size of the shunt? i). Size of the heart ii). Presence of third heart sound on auscultation iii). Wide pulse pressure Select the correct answer from given below code:", "options": [{"label": "A", "text": "i, ii, iii", "correct": true}, {"label": "B", "text": "i &amp; iii", "correct": false}, {"label": "C", "text": "Only i", "correct": false}, {"label": "D", "text": "ii &amp; iii", "correct": false}], "correct_answer": "A. i, ii, iii", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>i, ii, iii The larger the shunt size, the more volume overload is in the left heart. This leads to the increased size of the left atrium and ventricle to accommodate the extra volume.</p>\n<p><strong>Highyeild:</strong></p><p>Large shunts cause extra blood to fill the ventricles, leading to a third heart sound rapidly. This is seen prominently in Systolic heart failure. Left to right shunt is a leak from the systemic flow , leading to wide pulse pressure. Thus, the larger the shunt, the more systemic runoff.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The mother of an infant presents to the clinic with complaints of an increased resting period between breastfeeds, forehead sweating, and rapid breathing. On examination, no cyanosis was found. Auscultation revealed a continuous “machinery-like” murmur with maximum intensity at S2 with multiple clicks. Best heard in the second left intercostal space. What is the diagnosis?", "options": [{"label": "A", "text": "Atrial Septal Defect", "correct": false}, {"label": "B", "text": "Patent Ductus Arteriosus", "correct": true}, {"label": "C", "text": "Ventricular Septal defect", "correct": false}, {"label": "D", "text": "Mitral Stenosis", "correct": false}], "correct_answer": "B. Patent Ductus Arteriosus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Patent Ductus Arteriosus Continuous systolic and diastolic pressure differences between the aorta and pulmonary artery give rise to constant murmur.</p>\n<p><strong>Highyeild:</strong></p><p>The murmur starts after the first sound and peaks at the second heart sound. The buzz then diminishes in intensity and is audible during part of the diastole. The peak in the second heart sound differentiates the PDA murmur from other causes of continuous murmur . PDA can result in differential cyanosis in babies. The murmur is heard as if broken into multiple systolic sounds.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A researcher working in the pediatrics unit includes babies suffering from congenital heart defects. He discovered that around 10% of all CHD cases are atrial septal defects. Which of the following is true about this condition? i). It is the most common anomaly among all the CHDs ii). Associated with fixed S2 iii). Ejection systolic murmur heard in the aortic area iv). ECG shows rsR’ pattern in lead V1 v). Size of the shunt is directly proportional to the intensity of the tricuspid murmur. Select the correct answer from given below code:", "options": [{"label": "A", "text": "i, ii, iii", "correct": false}, {"label": "B", "text": "i, iii, iv", "correct": false}, {"label": "C", "text": "ii, iv, v", "correct": true}, {"label": "D", "text": "iii, iv, v", "correct": false}], "correct_answer": "C. ii, iv, v", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>ii, iv, v The most common congenital cardiac defect is a Ventricular septal defect (around 25%). It occurs due to an endovascular cushion defect.</p>\n<p><strong>Highyeild:</strong></p><p>Since ASD connects the two atria, inspiration does not produce any net pressure change between them, and respiration-related fluctuations in systemic venous return to the right side of the heart are abolished; thereby, the fixed S2. A systolic ejection murmur was heard in the pulmonary area because of the increased blood flow . Almost 90% of the patients of ASD show rsR’ pattern in lead V1 The size of the left to right shunt is directly proportional to the intensity of the pulmonary and tricuspid murmurs and heart size.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant with ostium primum type of atrial septal defect is brought to the clinic for a routine check-up. What murmur(s) will be heard on auscultation in this patient?", "options": [{"label": "A", "text": "Ejection systolic murmur", "correct": false}, {"label": "B", "text": "Holosystolic murmur", "correct": false}, {"label": "C", "text": "Delayed diastolic murmur", "correct": false}, {"label": "D", "text": "Both A and C", "correct": true}], "correct_answer": "D. Both A and C", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Both A and C Left to right shunt causes volume overload of the right ventricle.</p>\n<p><strong>Highyeild:</strong></p><p>The increased blood flow through the tricuspid valve results in a soft, delayed diastolic rumble at the lower left sternal border. The increased blood flow through the pulmonary valve produces an systolic ejection So, this murmur is produced because of increased blood in Right Ventricle.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. Holosystolic murmur is seen in mitral regurgitation, tricuspid regurgitation, and ventricular septal defect.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A sick infant with an increased suck-rest-suck cycle and tachypnoea presents to the OPD. The chest X-ray shows cardiomegaly with right atrial and right ventricular enlargement and a prominent main pulmonary artery. What is the diagnosis?", "options": [{"label": "A", "text": "Atrial Septal Defect", "correct": true}, {"label": "B", "text": "Tetralogy of Fallot", "correct": false}, {"label": "C", "text": "Ventricular Septal Defect", "correct": false}, {"label": "D", "text": "Tricuspid Regurgitation", "correct": false}], "correct_answer": "A. Atrial Septal Defect", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Atrial Septal Defect Clinical features are suggestive of congenital heart disease Right atrial and ventricular enlargement indicates isolated right heart volume overload, which occurs when there is a defect in the inter-atrial septum.</p>\n<p><strong>Highyeild:</strong></p><p>The pulmonary Artery also enlarges to accommodate the increased blood volume. Other findings: Relatively small aortic shadow, plethoric lung field. It is also associated with the Wide Fixed Split of the second heart sound.</p>\n<p><strong>Random:</strong></p><p>Explanation For Incorrect Option :- Option: B . Chest X-Ray in TOF shows a boot-shaped heart due to right ventricular hypertrophy Option: C . Chest X-Ray in Ventricular Septal Defect will show cardiomegaly (left ventricular type), prominent pulmonary artery, and increased pulmonary plethora.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year-old boy with a history of congenital heart disease is referred to your hospital. Echocardiography shows a 16 mm defect in the central portion of the atrial septum. Which of the following is true regarding the treatment of ASD?", "options": [{"label": "A", "text": "Surgical closure can be delayed till schooling age", "correct": false}, {"label": "B", "text": "Defects &lt; 18 mm can be observed.", "correct": false}, {"label": "C", "text": "Fossa ovalis defects can be closed percutaneously", "correct": true}, {"label": "D", "text": "Medical management with indomethacin is recommended.", "correct": false}], "correct_answer": "C. Fossa ovalis defects can be closed percutaneously", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Fossa ovalis defects can be closed percutaneously Fossa ovalis defects with good margins can be closed percutaneously in the catheterization lab with occlusive devices. ASD is also associated with wide fixed splitting of the second heart sound.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A . Surgical closure should be done before school entry to prevent late complications Option: B . Defects &lt; 8 mm can be observed for s pontaneous closure . Option: D . Indomethacin or ibuprofen is used for treating PDA and not ASD .</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old girl with a birth history of full-term normal vaginal delivery presents to the OPD with recurrent chest infections, palpitations, and dyspnoea on exertion. Chest X-ray shows cardiomegaly with left ventricular hypertrophy and increased pulmonary vascular markings. The pediatrician made a diagnosis of VSD, and echocardiography confirmed the same. Which of the following is true regarding the diagnosis?", "options": [{"label": "A", "text": "ECG findings vary with age", "correct": true}, {"label": "B", "text": "Muscular septum is the most typical location of the defect", "correct": false}, {"label": "C", "text": "Patients with VSD develop congestive cardiac failure by 6-10 years of age", "correct": false}, {"label": "D", "text": "Late diastolic murmur is heard in VSD.", "correct": false}], "correct_answer": "A. ECG findings vary with age", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>ECG findings vary with age Initially, all patients with VSD have right ventricular hypertrophy, which regresses slowly due to the delay in fall of pulmonary vascular resistance.</p>\n<p><strong>Highyeild:</strong></p><p>By 6-12 months of age, ECG shows left ventricular hypertrophy (only in significant VSD cases). In small VSD cases, ECG becomes normal as age progresses because small VSD can get closed with age. The membranous septum is the most typical location of the defect Patients with VSD develop congestive cardiac failure by 6-10 weeks of life Pansystolic murmur is heard in VSD.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old girl with a known case of Turner syndrome has a history of unknown congenital heart disease. On examination, there is no cyanosis, hypertension in the upper limb, or brachiofemoral delay. What is the most probable diagnosis?", "options": [{"label": "A", "text": "Patient Ductus Arteriosus", "correct": false}, {"label": "B", "text": "Atrial Septal Defect", "correct": false}, {"label": "C", "text": "Coarctation of Aorta", "correct": true}, {"label": "D", "text": "Ventricular Septal Defect", "correct": false}], "correct_answer": "C. Coarctation of Aorta", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Coarctation of Aorta Turner syndrome is associated with coarctation of the aorta.</p>\n<p><strong>Highyeild:</strong></p><p>The examination reveals a difference in blood pressure and pulse delay between the upper and lower limbs. This is highly suggestive of coarctation of the Inferior rib notching is also seen in the coarctation of the aorta. Such patients are at increased risk of berry aneurysms and cerebral hemorrhage. All the options are examples of cyanotic heart diseases, but Options A, B, and D do not cause blood pressure differences and pulse delays between the upper and lower limbs.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A patient with a known history of Ventricular septal defect walks into your OPD. Which of the following is true regarding the severity of the disease?", "options": [{"label": "A", "text": "If VSD is small, S2 is generally split with the average intensity of P2", "correct": false}, {"label": "B", "text": "If VSD is small, the delayed diastolic mitral murmur is absent", "correct": false}, {"label": "C", "text": "If VSD is large, only an ejection systolic murmur is heard.", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above If the VSD is small, the left to right shunt murmur will be pan systolic with typically split S2.</p>\n<p><strong>Highyeild:</strong></p><p>If the VSD is very small, it acts as a stenotic area and results in an ejection systolic murmur. Small VSDs can even get close with age. If the VSD is large, it transmits left ventricular systolic pressure to the right ventricle. Thus, the proper ventricular pressure increases and the difference in the systolic pressure between the two ventricles reduces. The systolic left-to-right shunt becomes shorter, softer, and heard as an ejection systolic murmur.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old girl with a history of unknown congenital heart disease. Previous hospital records of the child are missing. On examination, there is no cyanosis. A chest radiograph was ordered and is shown below: What is the most probable diagnosis?", "options": [{"label": "A", "text": "Truncus arteriosus", "correct": false}, {"label": "B", "text": "Coarctation of the aorta", "correct": true}, {"label": "C", "text": "Patent Ductus Arteriosus", "correct": false}, {"label": "D", "text": "Transposition of great arteries", "correct": false}], "correct_answer": "B. Coarctation of the aorta", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883708123-QTDK024017IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Coarctation of the aorta Figure 3 in the chest radiograph is seen in the coarctation of the aorta.</p>\n<p><strong>Highyeild:</strong></p><p>This appearance is formed due to restenotic dilatation of the aortic arch and left subclavian artery, indentation at the coarctation site, and post-stenotic dilatation of the descending aorta. Inferior rib Notching can also be seen in the Coarctation of the aorta.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A . Chest radiographs in truncus arteriosus often show moderate cardiomegaly with pulmonary plethora and widened mediastinum. Option: C . PDA can have cardiomegaly (predominantly left atrial and left ventricular enlargement) Option: D . TGA shoes egg-on-string There is often an apparent narrowing of the superior mediastinum due to the aortic and pulmonary arterial configuration, i.e., parallel in D-loop transposition, with the main pulmonary artery posterior to the aorta.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old boy with a small ventricular septal defect in the muscular septum comes for a routine check-up. He has no symptoms, and the Chest radiograph shows no abnormality. Which of the following would you advise?", "options": [{"label": "A", "text": "Surgical closure of the VSD using a patch", "correct": false}, {"label": "B", "text": "Good oral-dental hygiene", "correct": true}, {"label": "C", "text": "Catheter-based closure of the VSD", "correct": false}, {"label": "D", "text": "None of the above", "correct": false}], "correct_answer": "B. Good oral-dental hygiene", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Good oral-dental hygiene VSD is the most typical congenital lesion complicated by infective endocarditis. Therefore, good oral hygiene practices should be encouraged. VSD occurs because of endocardial cushion defects .</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A &amp; C. Closure is not recommended in small VSDs. Moreover, muscular defects have the highest chance of spontaneous closure.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 25 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 10 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 4-year-old child presents to your OPD with complaints of acute pallor and oliguria following diarrhoea. Hematuria is also noted in the patient. Petechiae are also spotted on the skin. What is your provisional diagnosis?", "options": [{"label": "A", "text": "Haemolytic uremic syndrome", "correct": true}, {"label": "B", "text": "Hydronephrosis", "correct": false}, {"label": "C", "text": "Thrombocytopenia Thrombotic Thrombocytopenic Purpura (TTP)", "correct": false}, {"label": "D", "text": "Autosomal dominant polycystic kidney disease (ADPKD)", "correct": false}], "correct_answer": "A. Haemolytic uremic syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Haemolytic uremic syndrome Haemolytic uremic syndrome M/c cause of ARF in young children It is a triad of: Microangiopathic hemolytic anemia Thrombocytopenia Acute Renal failure TTP is due to ADAMTS 13 deficiency and is usually seen in adults</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is false with respect to HUS?", "options": [{"label": "A", "text": "HUS is also known as thrombotic microangiopathy", "correct": false}, {"label": "B", "text": "Atypical HUS is associated with the Shiga toxin", "correct": true}, {"label": "C", "text": "It is the most common cause of Acute Renal failure (ARF) in young children", "correct": false}, {"label": "D", "text": "Eculizumab is used for atypical Hemolytic Uremic Syndrome (HUS)", "correct": false}], "correct_answer": "B. Atypical HUS is associated with the Shiga toxin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Atypical HUS is associated with the Shiga toxin Haemolytic uremic syndrome M/c cause of Acute Renal failure (ARF) in young children It is a triad of: Microangiopathic hemolytic anemia Thrombocytopenia Acute Renal failure Typical HUS is associated with Shiga toxin , which damages the endothelium of glomerular capillaries and leads to renal failure. Atypical HUS is due to abnormalities in the complement pathway. Plasmapheresis and Eculizumab are the management options for atypical HUS.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A primigravida woman comes to the antenatal clinic. Per the abdomen examination, the obstetrician noted that fundal height is less than the gestation period. Ultrasonography was ordered and showed the following renal abnormality:Which of the following is true about this condition?", "options": [{"label": "A", "text": "On antenatal ultrasonography, this is found in 4-5% of pregnancies", "correct": true}, {"label": "B", "text": "Postnatal USG is recommended after the first month of life", "correct": false}, {"label": "C", "text": "In severe cases, Postnatal USG is recommended after the first week of life", "correct": false}, {"label": "D", "text": "Infants with vesicoureteric reflux should undergo surgery.", "correct": false}], "correct_answer": "A. On antenatal ultrasonography, this is found in 4-5% of pregnancies", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884741992-QTDK051007IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>On antenatal ultrasonography, this is found in 4-5% of pregnancies The image shows hydronephrosis. Per abdomen examination at ANC clinic, demonstrates less-than-normal fundal height because of possible oligohydramnios.</p>\n<p><strong>Highyeild:</strong></p><p>On antenatal USG, Hydronephrosis is found in 4-5% of pregnancies, but most cases resolve without sequelae, representing transient physiological obstruction or stasis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. Postnatal USG is recommended during the first week of life. Option C. In severe cases, postnatal USG is recommended during the first day of life. Option D. Infants with VUR should be started with antibiotic prophylaxis; surgical management is rarely done nowadays.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 36-week primigravida woman comes to the clinic for a regular ANC visit. On per abdomen examination, her fundal height corresponds to 32 weeks. USG scan showed left-sided hydronephrosis. She was asked to get a postnatal USG scan done during the first-week postnatal period. Postnatal showed dilation of intra-renal pelvis dilation without dilation of the calyces. What is the grade of hydronephrosis according to Society for Fetal Urology grading system?", "options": [{"label": "A", "text": "Grade 1", "correct": true}, {"label": "B", "text": "Grade 2", "correct": false}, {"label": "C", "text": "Grade 3", "correct": false}, {"label": "D", "text": "Grade 4", "correct": false}], "correct_answer": "A. Grade 1", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Grade 1 Postnatal hydronephrosis is classified using Society for Fetal Urology (SFU) grade: Grade 0 No dilatation, calyceal walls are opposed to each other Grade 1 (mild) Dilatation of the renal pelvis without dilatation of the calyces (can also occur in the extrarenal pelvis) No parenchymal atrophy Grade 2 (mild) Dilatation of the renal pelvis (mild) and calyces (pelvicalyceal pattern is retained) No parenchymal atrophy Grade 3 (moderate) Moderate dilatation of the renal pelvis and calyces Blunting of fornices and flattening of papillae Mild cortical thinning may be seen Grade 4 (severe) Gross dilatation of the renal pelvis and calyces, which appear ballooned Loss of borders between the renal pelvis and calyces Renal atrophy was seen as cortical thinning</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old boy is brought to the clinic complaining of decreased urine output and easy fatiguability. He had an episode of dysentery 1 week back. Laboratory investigations show: RBC count- 2 million cells/mcL Total Leukocyte Count- 15.0 × 10 9 /L Platelet Count- 100 × 10 9 /L Serum LDH- 400 units/L The peripheral smear is shown below: What is the most likely Diagnosis?", "options": [{"label": "A", "text": "Atypical HUS", "correct": false}, {"label": "B", "text": "Shigatoxin-Associated HUS", "correct": true}, {"label": "C", "text": "Thrombotic Thrombocytopenic Purpura", "correct": false}, {"label": "D", "text": "Idiopathic Thrombocytopenic Purpura", "correct": false}], "correct_answer": "B. Shigatoxin-Associated HUS", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884742162-QTDK051010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Shigatoxin-Associated HUS The clinical presentation in the child combined with decreased RBC and platelet count, increased serum LDH and presence of schistocytes in peripheral smear point towards the diagnosis of Hemolytic Uremic Syndrome .</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. As the TLC is high in this case, Shigatoxin-Associated HUS is more likely the answer than atypical HUS. Leukocytosis is due to neutrophilia. Option :C. T hrombotic thrombocytopenic purpura (TTP) is caused due to deficiency of ADAMTS13 , a von Willebrand factor (VWF)-cleavage protease. This deficiency may be either acquired or congenital. It will show hemolytic anemia and thrombocytopenia but not leukocytosis. Option: D. ITP is an autoimmune disorder against own platelets . Clinical features include bruises and other bleeding problems. Hemolysis is not seen here.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 9-year-old girl presents to the clinic with easy fatiguability and decreased urine output. She was recently treated for diarrhoea. Which of the following is a possible cause of this condition?", "options": [{"label": "A", "text": "E.Coli 0157:H7", "correct": false}, {"label": "B", "text": "E.Coli O104:H4", "correct": false}, {"label": "C", "text": "Shigella Dysenteriae 1", "correct": false}, {"label": "D", "text": "All the above", "correct": true}], "correct_answer": "D. All the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All the above This is a Shigatoxin-Associated Hemolytic Uremic Syndrome because it was associated with a diarrhoeal prodrome.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A &amp; B. Verotoxin-producing Coli (in North America and Europe): The most common strain is 0157:H7, and in a recent epidemic, O104:H4. Option: C. Shigella Dysenteriae 1 is a common cause of HUS in South Asia . Cytotoxin-mediated injury to the endothelium of the renal microvasculature leads to localised coagulation and fibrin deposition.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 11-year-old boy presents to the OPD with decreased urine output and tiredness. There is no significant history. Laboratory investigations show:- RBC count- 1.8 million cells/mcL Total Leukocyte Count- 7 × 109/L Platelet Count- 90 × 109/L Serum LDH- 800 units/L Urine examination shows microscopic hematuria and proteinuria. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Atypical HUS", "correct": true}, {"label": "B", "text": "Shigatoxin-Associated HUS", "correct": false}, {"label": "C", "text": "Thrombotic Thrombocytopenic Purpura", "correct": false}, {"label": "D", "text": "Idiopathic Thrombocytopenic Purpura", "correct": false}], "correct_answer": "A. Atypical HUS", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Atypical HUS The clinical presentation combined with hemolytic anemia and thrombocytopenia suggests the diagnosis of HUS . Since the WBC count is normal here, Shigatoxin-Associated HUS is less likely to be the cause.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Shigatoxin-Associated HUS usually follows a prodrome of acute diarrhoea and dysentery and will have neutrophilic leukocytosis. Option: C. Thrombotic thrombocytopenic purpura (TTP) is caused due to deficiency of ADAMTS13 , a von Willebrand factor (VWF)-cleavage protease. This deficiency may be either acquired or congenital. It will show hemolytic anemia and thrombocytopenia but not leukocytosis. Option: D. ITP is an autoimmune disorder against own platelets. Clinical features include bruises and other bleeding problems. Hemolysis is not seen here.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old boy presents to the clinic with altered consciousness, easy fatiguability and decreased urine output. On examination, pallor and high blood pressure were present. Urine examination showed microscopic hematuria and mild proteinuria. Diagnosis of atypical HUS is made. Which of the following causes this condition?", "options": [{"label": "A", "text": "Antibodies against Complement Factor H", "correct": true}, {"label": "B", "text": "Verotoxin-producing E Coli", "correct": false}, {"label": "C", "text": "Low levels of C1 inhibitor", "correct": false}, {"label": "D", "text": "Shigatoxin 1", "correct": false}], "correct_answer": "A. Antibodies against Complement Factor H", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Antibodies against Complement Factor H The clinical presentation is of HUS. There are two types of HUS; the first is associated with shigatoxin-producing enteropathogens (Shiga toxin-associated HUS), whereas the second is associated with abnormalities of the alternative complement pathway (Complement associated or atypical HUS) Predisposing factors for Atypical HUS include mutations in factors H, I, B, C3, thrombomodulin and antibodies against complement factor H.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B &amp; D. Shiga toxins 1 and 2 and Verotoxin are all responsible for Shiga toxin-associated HUS. Option: C. Low levels of C1 inhibitor cause hereditary angioedema.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 12-year-old boy presenting to the clinic with decreased urine output and easy fatiguability was diagnosed with Hemolytic Uremic Syndrome. Which of the following is true about its treatment?", "options": [{"label": "A", "text": "Corticosteroids", "correct": false}, {"label": "B", "text": "Eculizumab", "correct": false}, {"label": "C", "text": "Plasma exchange with an infusion of fresh frozen plasma", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Option: A. Patients with anti-factor H antibodies benefit from immunosuppression to reduce antibody production. Option: B. Eculizumab is a high-affinity monoclonal antibody targeted against C5. It benefits patients with HUS associated with the activation of the complement cascade. Option: C. Repeated plasma exchange with fresh frozen plasma infusion is recommended for patients with atypical HUS.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old boy with a recent episode of dysentery comes to the clinic with symptoms of easy fatiguability, confusion, and decreased urine output. Laboratory investigations show: RBC count- 1.8 million cells/mcL Total Leukocyte Count- 15 × 10 9 /L Platelet Count- 98 × 10 9 /L Serum LDH- 80 units/L ELISA for Shiga toxin performed on stool sample came positive. Which of the following denotes a poor prognosis in this patient?", "options": [{"label": "A", "text": "Oliguria for &gt; 2 weeks", "correct": false}, {"label": "B", "text": "Severe neurological involvement", "correct": false}, {"label": "C", "text": "Presence of cortical necrosis.", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above The clinical scenario point towards hemolytic uremic syndrome (Shigatoxin-associated). On follow-up, 20-30% of these patients show varying degrees of residual renal damage.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options:- Option: A. Factors suggesting poor prognosis include oliguria for more than 2 weeks. Option: B. Severe neurological involvement, such as focal or generalised seizures and alteration of consciousness, suggests poor prognosis. Option: C. Endothelial swelling, blood cell sequestration, and fibrin thrombi cause capillary narrowing and may cause patchy or extensive renal cortical necrosis, suggesting poor prognosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 20 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 16 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 2-year-old child presents with the complaint of recurrent cough and breathing difficulty usually at night or early morning. On examination, the baby is slightly dyspneic with prolonged expiration and wheezes heard. Which of the following devices will be used most commonly by this child?", "options": [{"label": "A", "text": "A", "correct": false}, {"label": "B", "text": "B", "correct": false}, {"label": "C", "text": "C", "correct": true}, {"label": "D", "text": "D", "correct": false}], "correct_answer": "C. C", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1725359126115-photos-1725270863057-QTDK056001IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>C The above case scenario is of an asthma patient. The age of the child is 2 years so the device most commonly used is MDI with a spacer with a facemask.</p>\n<p><strong>Highyeild:</strong></p><p>Metered Dose Inhaler (MDI) ROTAHALER Metered Dose Inhaler (MDI) with spacer with facemask Metered Dose Inhaler (MDI) with spacer Children &lt;4-year-old: MDI with spacer with face mask Children &gt;4-year-old: MDI with spacer preferred Children &gt;12-year-old: MDI used directly. Use of spacer improves drug deposition.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old girl presents with the complaint of recurrent cough, wheezing, and breathing difficulty usually at night or early morning. These symptoms are usually present daily. On examination, she is dyspneic, anxious, and has a prolonged expiration. Due to these symptoms, she is missing school which affects her studies. How will you manage the patient?", "options": [{"label": "A", "text": "Short-acting β-agonist (SABA) whenever symptoms", "correct": false}, {"label": "B", "text": "Low-dose inhaled steroids + SABA (Short-acting β-agonist)", "correct": false}, {"label": "C", "text": "Low-dose inhaled steroids + LABA (Long-acting β-agonist)", "correct": true}, {"label": "D", "text": "Low-dose inhaled steroids + Short-acting β-agonist (SABA) whenever required", "correct": false}], "correct_answer": "C. Low-dose inhaled steroids + LABA (Long-acting β-agonist)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Low-dose inhaled steroids + LABA (Long-acting β-agonist) The above case scenario is of moderate persistent asthma patients. The child is anxious with increased respiratory rate, chest indrawing, and symptoms affecting her studies. So the management will include low dose Inhaled Corticosteroids ICS + LABALong -acting β-agonist or medium-dose ICS Inhaled Corticosteroids. STEPWISE TREATMENT OF ASTHMA: Symptoms Treatment Step 4: Severe persistent Continuous Limited physical activity High dose inhaled steroids+ Long-acting β 2 agonist Add montelukast Refer to special Step 3: Moderate persistent Daily use β 2 , agonist Daily attack affects activity Low dose inhaled steroids + Long-acting β 2 agonist OR Medium dose inhaled steroids Step 2: Mild persistent Low grade symptoms twice a month Nighttime awakening once per month Low dose inhaled steroids Short-acting β 2 , agonist, whenever symptoms Step 1: Intermittent Infrequent Asymptomatic and normal PEFR between attack Short-acting β 2 agonist, whenever symptoms</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-year-old child came with a recurrent cough and breathing difficulty usually at night or early morning. Her mother also had a history of asthma. Which of the following are diagnostic markers of asthma in children?", "options": [{"label": "A", "text": "Forced Expiratory Volume FEV1/ Forced Vital Capacity FVC less than 60%", "correct": false}, {"label": "B", "text": "Improve in Forced Expiratory Volume FEV1 &gt; 12% after SABA Short-acting β-agonist", "correct": true}, {"label": "C", "text": "Diurnal Peak Expiratory Flow Rate PEFR variation more than or equal to 15%", "correct": false}, {"label": "D", "text": "Decrease in FEV1 by &gt;20% during or after exercise", "correct": false}], "correct_answer": "B. Improve in Forced Expiratory Volume FEV1 > 12% after SABA Short-acting β-agonist", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Improve in Forced Expiratory Volume FEV1 &gt; 12% after SABA Short-acting β-agonist Diagnostic markers of asthma in children are:- Forced Expiratory VolumeFEV1/Forced Vital Capacity FVC &lt; 80% OR 0.8 Improvement in FEV1 &gt;12% after Short-acting β-agonist SABA Diurnal Peak Expiratory Flow Rate PEFR variation &gt;20% Decrease in FEV1 by 15% during or after exercises Exhaled nitric oxide &gt;20ppb supports clinical diagnosis of asthma Low FEF 27 (a best marker of airway obstruction)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-year-old child came with a history of asthma. Currently, his symptom has increased as he complains of recurrent cough, wheezing, and breathing difficulty early in the morning. His symptoms are coming daily despite daily use of Short-acting β-agonist SABA. In which category will you categorize the patient?", "options": [{"label": "A", "text": "Mild persistent", "correct": false}, {"label": "B", "text": "Moderate persistent", "correct": true}, {"label": "C", "text": "Severe persistent", "correct": false}, {"label": "D", "text": "Intermittent persistent", "correct": false}], "correct_answer": "B. Moderate persistent", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Moderate persistent The above case scenario is of moderate persistent asthma. STEPWISE TREATMENT OF ASTHMA: Symptoms Treatment Step 4: Severe persistent Continuous Limited physical activity High dose inhaled steroids+ Long-acting β 2 agonist Add montelukast Refer to special Step 3: Moderate persistent Daily use β 2 , agonist Daily attack affects activity Low dose inhaled steroids + Long-acting β 2 agonist OR Medium dose inhaled steroids Step 2: Mild persistent Low grade symptoms twice a month Nighttime awakening once per month Low dose inhaled steroids Short-acting β 2 , agonist, whenever symptoms Step 1: Intermittent Infrequent Asymptomatic and normal PEFR between attack Short-acting β 2 agonist, whenever symptoms GRADING OF SEVERITY OF ASTHMA Clinical parameter Mild Moderate Bovoro Color Normal Normal Pale Sensorium Normal Anxious Agitated Respiratory rate Increased Increased Increased Dyspnea Absent Moderate Severe Speech Can speak sentancos Can speak in phrases Difficulty in speech Use of accessory muscles Nil or minimal Chost Indrawing Indrawing; nasal flare Pulsus paradoxus 10 mm 10-20 mm &gt;20 mm Rhonchi Expiratory and/or Inspiratory Expiratory and/or Inspiratory Expiratory or absent Peak expiratory flow rate &gt;80% 60-80% &lt;80% Oxygen saturation &gt;95% 00-05% &lt;90%</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In the above patient, what will be the recommended management?", "options": [{"label": "A", "text": "Short-acting β-agonist (SABA) + low dose ICS Inhaled Corticosteroids", "correct": false}, {"label": "B", "text": "Short-acting β-agonist SABA + medium dose ICS Inhaled Corticosteroids", "correct": true}, {"label": "C", "text": "Short-acting β-agonist SABA+ high dose ICS Inhaled Corticosteroids", "correct": false}, {"label": "D", "text": "Short-acting β-agonist (SABA) + high dose Inhaled Corticosteroids (ICS) Long-acting β-agonist (LABA)", "correct": false}], "correct_answer": "B. Short-acting β-agonist SABA + medium dose ICS Inhaled Corticosteroids", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Short-acting β-agonist SABA + medium dose ICS Inhaled Corticosteroids The above case scenario is of moderate persistent asthma. The management will include- Short-acting β-agonist SABA + medium dose ICS Inhaled Corticosteroids or low dose ICS Inhaled Corticosteroids + LABA Long-acting β-agonist. STEPWISE TREATMENT OF ASTHMA:- Symptoms Treatment Step 4: Severe persistent Continuous Limited physical activity High dose inhaled steroids+ Long-acting β 2 agonist Add montelukast Refer to special Step 3: Moderate persistent Daily use β 2 , agonist Daily attack affects activity Low dose inhaled steroids + Long-acting β 2 agonist OR Medium dose inhaled steroids Step 2: Mild persistent Low grade symptoms twice a month Nighttime awakening once per month Low dose inhaled steroids Short-acting β 2 , agonist, whenever symptoms Step 1: Intermittent Infrequent Asymptomatic and normal PEFR between attack Short-acting β 2 agonist, whenever symptoms</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 9-year-old came with complaining of recurrent cough, wheezing, and breathing difficulty usually twice a month though he is able to do his daily activities normally. His mother also had a history of asthma. What will be the recommended management of this patient?", "options": [{"label": "A", "text": "Short-acting β-agonist SABA as needed", "correct": false}, {"label": "B", "text": "Short-acting β-agonist SABA as needed + low dose ICS-Inhaled Corticosteroids", "correct": true}, {"label": "C", "text": "Short-acting β-agonist SABA daily + low dose ICS- Inhaled Corticosteroids", "correct": false}, {"label": "D", "text": "Short-acting β-agonist SABA as needed + medium dose ICS-Inhaled Corticosteroids", "correct": false}], "correct_answer": "B. Short-acting β-agonist SABA as needed + low dose ICS-Inhaled Corticosteroids", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Short-acting β-agonist SABA as needed + low dose ICS-Inhaled Corticosteroids The above case scenario is of mild persistent asthma. The management will include SABA as needed + low dose ICS. STEPWISE TREATMENT OF ASTHMA: Symptoms Treatment Step 4: Severe persistent Continuous Limited physical activity High dose inhaled steroids+ Long-acting β 2 agonist Add montelukast Refer to special Step 3: Moderate persistent Daily use β 2 , agonist Daily attack affects activity Low dose inhaled steroids + Long-acting β 2 agonist OR Medium dose inhaled steroids Step 2: Mild persistent Low grade symptoms twice a month Nighttime awakening once per month Low dose inhaled steroids Short-acting β 2 , agonist, whenever symptoms Step 1: Intermittent Infrequent Asymptomatic and normal PEFR between attack Short-acting β 2 agonist, whenever symptoms</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The above patient’s symptoms will be categorized as?", "options": [{"label": "A", "text": "Intermittent symptoms", "correct": false}, {"label": "B", "text": "Mild persistent symptoms", "correct": true}, {"label": "C", "text": "Moderate persistent symptoms", "correct": false}, {"label": "D", "text": "Severe persistent symptoms", "correct": false}], "correct_answer": "B. Mild persistent symptoms", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Mild persistent symptoms The above case scenario is of mild persistent asthma. STEPWISE TREATMENT OF ASTHMA: Symptoms Treatment Step 4: Severe persistent Continuous Limited physical activity High dose inhaled steroids+ Long-acting β 2 agonist Add montelukast Refer to special Step 3: Moderate persistent Daily use β 2 , agonist Daily attack affects activity Low dose inhaled steroids + Long-acting β 2 agonist OR Medium dose inhaled steroids Step 2: Mild persistent Low grade symptoms twice a month Nighttime awakening once per month Low dose inhaled steroids Short-acting β 2 , agonist, whenever symptoms Step 1: Intermittent Infrequent Asymptomatic and normal PEFR between attack Short-acting β 2 agonist, whenever symptoms GRADING OF SEVERITY OF ASTHMA Clinical parameter Mild Moderate Bovoro Color Normal Normal Pale Sensorium Normal Anxious Agitated Respiratory rate Increased Increased Increased Dyspnea Absent Moderate Severe Speech Can speak sentancos Can speak in phrases Difficulty in speech Use of accessory muscles Nil or minimal Chost Indrawing Indrawing; nasal flare Pulsus paradoxus 10 mm 10-20 mm &gt;20 mm Rhonchi Expiratory and/or Inspiratory Expiratory and/or Inspiratory Expiratory or absent Peak expiratory flow rate &gt;80% 60-80% &lt;80% Oxygen saturation &gt;95% 00-05% &lt;90%</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following conditions will be considered in a life-threatening asthma? Cyanosis Silent chest (Peak Expiratory Flow Rate) PEFR &lt; 20% of predicted Altered sensorium Oxygen saturation &lt; 85% Select the correct answer from given below code:-", "options": [{"label": "A", "text": "1, 2, and 4", "correct": false}, {"label": "B", "text": "1, 2, 3, and 4", "correct": false}, {"label": "C", "text": "1, 2, and 5", "correct": false}, {"label": "D", "text": "1, 2, 3, 4, and 5", "correct": true}], "correct_answer": "D. 1, 2, 3, 4, and 5", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1, 2, 3, 4, and 5 When to consider life-threatening asthma: Cyanosis Silent chest Peak Expiratory Flow Rate (PEFR) &lt;30% of predicted Altered sensorium Oxygen saturation &lt;90%</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 14-year-old child came with the complaint of recurrent cough, wheezing, and breathing difficulty usually early in the morning. These symptoms occur almost daily despite using high doses (Inhaled Corticosteroid) of ICS. His mother also had a history of asthma. Which IgE antibody is used nowadays?", "options": [{"label": "A", "text": "OMALIZUMAB", "correct": true}, {"label": "B", "text": "MEPOLIZUMAB", "correct": false}, {"label": "C", "text": "DUPILUMAB", "correct": false}, {"label": "D", "text": "ADALIMUMAB", "correct": false}], "correct_answer": "A. OMALIZUMAB", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>OMALIZUMAB The IgE antibody used for asthma nowadays is It binds to IgE and blocks its action on the IgE receptor. Indicated in children &gt; 6 years with severe asthma on the max dose of ICS/OCS</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15-year-old child came with the complaint of recurrent cough, wheezing, and breathing difficulty usually early in the morning. These symptoms occur almost daily despite using high doses of Inhaled Corticosteroids ICS. His mother also had a history of asthma. Doctor advised him to give MEPOLIZUMAB. What is the mechanism of action of this drug?", "options": [{"label": "A", "text": "Anti-IgE antibody", "correct": false}, {"label": "B", "text": "Anti-IL-5 antibody", "correct": true}, {"label": "C", "text": "Anti-IL-4 antibody", "correct": false}, {"label": "D", "text": "Anti-IL-13 antibody", "correct": false}], "correct_answer": "B. Anti-IL-5 antibody", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Anti-IL-5 antibody MEPOLIZUMAB is an anti IL-5 . It blocks IL-5-mediated eosinophilopoiesis. Indicated in children &gt; 12 years with severe eosinophilic asthma.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is not included in the discharge criteria of the patient with asthma from the hospital?", "options": [{"label": "A", "text": "Patient should be on discharge medications for 12 hrs prior to discharge.", "correct": true}, {"label": "B", "text": "Correct inhaler technique is checked and recorded", "correct": false}, {"label": "C", "text": "If the recorded Peak Expiratory Flow Rate PEFR is &gt;75% of predicted of the best and Peak Expiratory Flow Rate PEFR diurnal variation is &lt; 20%, treatment should include soluble steroids and inhaled steroids in addition to the bronchodilation", "correct": false}, {"label": "D", "text": "Patients should be given a self-management plan or instructions should be given to the parents", "correct": false}], "correct_answer": "A. Patient should be on discharge medications for 12 hrs prior to discharge.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Patient should be on discharge medications for 12 hrs prior to discharge. Discharge criteria from the hospital include: Patients should be on discharge medication for 24 hours prior to discharge. The correct inhaler technique is checked and recorded. If recorded PEFR &gt;75% of predicted the best and PEFR diurnal variation is less than 20%, treatment should include soluble steroids tablets and inhaled steroids in addition to the bronchodilator. The patient should be given a self-management plan or instructions should be given to the parents.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15-year-old child came to a paediatric emergency with the complaint of recurrent cough, wheezing, and breathing difficulty since morning. His symptoms are continuous for the past 1 week despite the use of SABA + high dose ICS + LABA. Currently, he is unconscious. What will be the management of this patient?", "options": [{"label": "A", "text": "Injection terbutaline s/c", "correct": false}, {"label": "B", "text": "Inhaled salbutamol", "correct": false}, {"label": "C", "text": "Injection hydrocortisone", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above The above case scenario is of life-threatening asthma. The presence of any of the following indicates life-threatening asthma. Cyanosis, silent chest, poor respiratory efforts, exhaustion or fatigue, altered sensorium, PEFR&lt;30% of predicted, and oxygen saturation &lt;90%. Such patients should immediately receive oxygen by mask or hood. An injection of terbutaline or adrenaline is given subcutaneously, inhalation of salbutamol or terbutaline and ipratropium is started, an injection of hydrocortisone (5 mg/kg) is given and arrangements are made to transfer the patient to an intensive care unit (ICU) preferably with an accompanying physician. If the patient shows improvement, the salbutamol/ terbutaline inhalation is continued every 20-30 minutes, and hydrocortisone (3-5 mg/kg) is continued every 6-8 hours till the patient starts accepting orally. If the patient does not improve or deteriorate a slow IV infusion of magnesium sulfate (SO mg/kg) or a loading dose of theophylline is given. If there is no improvement with this management, the patient is prepared for mechanical ventilation. Patients should also be screened for causes of poor response such as acidosis, pneumothorax, electrolyte imbalance and infection, and treated accordingly.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant presented with erythematous lesions on the cheek, and extensor aspect of limbs, mother has a history of bronchial asthma, and the probable diagnosis is:", "options": [{"label": "A", "text": "Airborne contact dermatitis", "correct": false}, {"label": "B", "text": "Atopic dermatitis", "correct": true}, {"label": "C", "text": "Seborrheic dermatitis", "correct": false}, {"label": "D", "text": "Infectious eczematoid dermatitis", "correct": false}], "correct_answer": "B. Atopic dermatitis", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884939517-QTDK056013IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Atopic dermatitis Atopic dermatitis is associated with a history of bronchial asthma.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-year-old child, known for severe persistent asthma, on Inhaled Corticosteroids ICS and salmeterol combination + montelukast arrives in an emergency in severe respiratory distress, cyanosis, and chest auscultation reveals silent chest. The child is not able to speak sentences. What is the first step of management in this child?", "options": [{"label": "A", "text": "Salbutamol by nebulisation", "correct": false}, {"label": "B", "text": "Subcutaneous adrenaline", "correct": false}, {"label": "C", "text": "Intubation", "correct": false}, {"label": "D", "text": "Oxygen by mask", "correct": true}], "correct_answer": "D. Oxygen by mask", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Oxygen by mask The first line of management of severe persistent asthma is oxygen by mask.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is most commonly preferred in the 5-year-old asthma patient?", "options": [{"label": "A", "text": "A", "correct": false}, {"label": "B", "text": "B", "correct": true}, {"label": "C", "text": "C", "correct": false}, {"label": "D", "text": "D", "correct": false}], "correct_answer": "B. B", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1725359186495-photos-1725270863418-QTDK056015IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>B Children &lt; 4-year-old: MDI Metered Dose Inhaler with spacer with face mask Children &gt;4-year-old: MDI Metered Dose Inhaler with spacer preferred Children &gt;12-year-old: MDI Metered Dose Inhaler used directly. The use of a spacer improves drug deposition. MDI Metered Dose Inhaler with spacer with facemask MDI Metered Dose Inhaler with spacer ROTAHALER MDI Metered Dose Inhaler</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is an indication of using mast cell stabilizers in childhood asthma?", "options": [{"label": "A", "text": "Aspirin-induced asthma", "correct": false}, {"label": "B", "text": "Severe asthma", "correct": false}, {"label": "C", "text": "Exercise-induced asthma", "correct": true}, {"label": "D", "text": "Status asthmaticus", "correct": false}], "correct_answer": "C. Exercise-induced asthma", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Exercise-induced asthma Mast cell stabilizers (such as cromolyn sodium and nedocromil sodium) inhibit the degranulation of mast cells and be effective for preventing exercise-induced bronchospasm and as a treatment option in mild-moderate asthma.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 26 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 11 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 4yr old child presented with progressive gait difficulties and lurching. Examination shows proximal muscle weakness, more in the lower limbs, positive Gower sign and the following finding. What can be the diagnosis?", "options": [{"label": "A", "text": "Myasthenia Gravis", "correct": false}, {"label": "B", "text": "Guillain - Barre Syndrome (GBS)", "correct": false}, {"label": "C", "text": "Polio", "correct": false}, {"label": "D", "text": "Duchene muscular dystrophy", "correct": true}], "correct_answer": "D. Duchene muscular dystrophy", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1725358909942-photos-1725270861119-QTDK045001IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Duchene muscular dystrophy Duchenne muscular dystrophy is the most common neuromuscular disease and it follows an XLR inheritance pattern. Gait disturbances become apparent at 3-4 years of age. Waddling gait, Gower sign and calf muscle pseudohypertrophy are classical findings. Dilated cardiomyopathy can develop Eteplirsen is approved as a treatment</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A . Myasthenia gravis presents with ptosis, peep sign, ophthalmoplegia Option B . Guillain - Barre Syndrome (GBS) presents as an ascending paralysis and usually has preceding respiratory or Gastrointestinal (GI) infection. Option C. Polio is an anterior motor horn disease</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Identify the correct statements from the following regarding Spinal Muscular atrophy: Spinal Muscular atrophy is an Autosomal dominant(AD) disease. It is mainly due to mutation in the Survival Of the Motor Neuron SMN-1 gene Cardiac involvement is usually seen It follows a very progressive course and has 3 clinical types. Fasciculations can be seen Select the correct answer from the given below code:", "options": [{"label": "A", "text": "All are correct", "correct": false}, {"label": "B", "text": "ii, iii are correct", "correct": false}, {"label": "C", "text": "i, iii, iv, v are correct", "correct": false}, {"label": "D", "text": "ii, v are correct", "correct": true}], "correct_answer": "D. ii, v are correct", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>ii, v are correct Spinal Muscular atrophy is an Autosomal recessive (AR) disease Occurs mainly due to mutation in the Survival Of Motor Neuron SMN 1 gene at chromosome 5q Cardiac involvement is not seen which differentiates it from dystrophies. It has a static course and has 4 clinical types Deep tendon reflexes are usually absent. Fasciculations, tremors and repeated chest infections can be seen.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Nusinersen is used for which of the following diseases?", "options": [{"label": "A", "text": "Muscular dystrophy", "correct": false}, {"label": "B", "text": "Inflammatory myopathy", "correct": false}, {"label": "C", "text": "Spinal muscular atrophy", "correct": true}, {"label": "D", "text": "Guillain Barre syndrome", "correct": false}], "correct_answer": "C. Spinal muscular atrophy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Spinal muscular atrophy Nusinersen (Spinraza) is an antisense oligonucleotide approved for Spinal Muscular Atrophy (SMA) which has shown significant benefits. It is a newer gene modification therapy</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 13-year-old girl presents to the clinic with complaints of disturbance in walking, vertigo, paraesthesia, tinnitus followed by throbbing unilateral headache. She has had such episodes in the past. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Episodic Ataxia", "correct": false}, {"label": "B", "text": "Migraine", "correct": true}, {"label": "C", "text": "Miller-Fisher Syndrome", "correct": false}, {"label": "D", "text": "Cluster headache", "correct": false}], "correct_answer": "B. Migraine", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Migraine Basilar migraine presents as recurrent episodes of cerebellar or brainstem dysfunction in adolescent girls.</p>\n<p><strong>Highyeild:</strong></p><p>Symptoms include gait ataxia, visual loss, vertigo, paraesthesia, tinnitus, and occasionally loss of consciousness followed by throbbing occipital headache.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Episodic ataxias are due to ion channel mutations. Type 1 is due to a mutation in the potassium channel gene KCNA1 and Type 2 is due to a mutation in the voltage-dependent calcium channel gene. Symptoms of Type 1 include attacks of ataxia and myokymia of the face and limbs lasting for 10 minutes to 6 hours duration and are seen after 5-7 years of age. Symptoms in Type 2 include episodes of ataxia, vertigo, jerk nystagmus, and vomiting lasting for 1 hour to a day and are seen in school age. Option C. Miller-Fisher syndrome is a variant of Guillain-Barre Syndrome in which a previously well child develops ataxia, ophthalmoplegia and areflexia. Option D. Cluster headache is a unilateral excruciating periorbital pain with lacrimation and rhinorrhoea and it is more common in males.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old boy presents to the clinic with complaints of staggering gait, frequent falling, and slurred speech. On examination, he has the following findings: Genetic examination shows a repeat of GAA on chromosome 9. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Friedrich ataxia", "correct": true}, {"label": "B", "text": "Abetalipoproteinemia", "correct": false}, {"label": "C", "text": "Episodic Ataxia Type 1", "correct": false}, {"label": "D", "text": "Episodic Ataxia Type 2", "correct": false}], "correct_answer": "A. Friedrich ataxia", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884453423-QTDK045008IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Friedrich ataxia Friedrich Ataxia: Most common autosomal recessive ataxia caused due to unstable trinucleotide repeat of GAA at chromosome 9q13 which encodes frataxin (iron-binding protein).</p>\n<p><strong>Highyeild:</strong></p><p>Usually seen between 2 and 15 years with slowly progressive ataxia. Symptoms include dysarthria, absent tendon reflexes, extensor plantar response, pes cavus, scoliosis, loss of position and vibration sense, and hypertrophic cardiomyopathy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. Abetalipoproteinemia is an autosomal recessive disorder caused by a defect in the MTTP gene which encodes for microsomal triglyceride transfer protein. Symptoms are fat malabsorption, failure to thrive, acanthocytosis, severe anaemia, ataxia, retinitis pigmentosa, with night blindness. Option C. Episodic Ataxia Type1 is due to a mutation in the potassium channel gene KCNA1. Symptoms of Type 1 include attacks of ataxia and myokymia of the face and limbs lasting for 10 minutes to 6 hours duration and are seen after 5-7 years of age. Option D. Episodic Ataxia type 2 is due to a mutation in the voltage-dependent calcium channel gene. Symptoms in Type 2 include episodes of ataxia, vertigo, jerk nystagmus, and vomiting lasting for 1 hour to a day and are seen in school age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 11-year-old boy presents to the clinic with complaints of excessive sidewards bending, slurred speech and swaying during walking. On examination, he had scoliosis and a high plantar longitudinal arch. Echocardiography showed hypertrophic cardiomyopathy. Which of the following is true about the condition?", "options": [{"label": "A", "text": "It is due to impairment in lysosomal functioning", "correct": false}, {"label": "B", "text": "Autosomal dominant mode of inheritance", "correct": false}, {"label": "C", "text": "Trinucleotide repeat of CAG is seen", "correct": false}, {"label": "D", "text": "Degeneration of spinocerebellar tract", "correct": true}], "correct_answer": "D. Degeneration of spinocerebellar tract", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Degeneration of spinocerebellar tract The clinical scenario of ataxia, dysarthria, scoliosis, pes cavus and hypertrophic cardiomyopathy point towards Friedreich Ataxia.</p>\n<p><strong>Highyeild:</strong></p><p>Degeneration of spinocerebellar tract leads to ataxia and degeneration of dorsal columns leads to decreased vibratory and proprioception senses.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Mutation in Frataxin leads to impairment in mitochondrial functioning. Option B. Friedreich Ataxia is inherited in autosomal recessive mode Option C. CAG repeats are seen in Huntington's In Friedreich Ataxia, GAA repeats are seen in chromosome 9 in a gene encoding for frataxin.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old girl presents to the clinic with unsteady gait, loss of muscle coordination and the following lesions: Genetic testing showed a mutation in the ATM gene at chromosome 11. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Friedrich ataxia", "correct": false}, {"label": "B", "text": "Ataxia Telangiectasia", "correct": true}, {"label": "C", "text": "Episodic Ataxia Type 1", "correct": false}, {"label": "D", "text": "Episodic Ataxia Type 2", "correct": false}], "correct_answer": "B. Ataxia Telangiectasia", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884453479-QTDK045010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ataxia Telangiectasia This autosomal recessive disorder due to mutation in the ATM gene at chromosome 11 presents progressive cerebellar ataxia. Telangiectasias are noted in skin flexures and/or bulbar conjunctiva.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Friedrich Ataxia: Most common autosomal recessive ataxia caused due to unstable trinucleotide repeat of GAA at chromosome 9q13 which encodes frataxin (iron-binding protein). Usually seen between 2 and 15 years with slowly progressive ataxia. Symptoms include dysarthria, absent tendon reflexes, extensor plantar response, pes cavus, scoliosis, loss of position and vibration sense, and hypertrophic cardiomyopathy. Option C. Episodic Ataxia Type1 is due to a mutation in the potassium channel gene KCNA1. Symptoms of Type 1 include attacks of ataxia and myokymia of the face and limbs lasting for 10 minutes to 6 hours duration and are seen after 5-7 years of age. Option D. Episodic Ataxia type 2 is due to a mutation in the voltage-dependent calcium channel gene. Symptoms in Type 2 include episodes of ataxia, vertigo, jerk nystagmus, and vomiting lasting for 1 hour to a day and are seen in school age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15-year-old boy presents to the clinic with complaints of unsteady walking, scaly skin, and difficulty in vision during the night. Laboratory investigation revealed increased levels of phytanic acid in the blood. Which is the most likely diagnosis?", "options": [{"label": "A", "text": "Joubert syndrome", "correct": false}, {"label": "B", "text": "Refsum Disease", "correct": true}, {"label": "C", "text": "Friedreich ataxia", "correct": false}, {"label": "D", "text": "Miller-Fischer Syndrome", "correct": false}], "correct_answer": "B. Refsum Disease", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Refsum Disease Refsum Disease: Autosomal recessive disorder of α-oxidation where phytanic acid is not metabolised into pristanic acid. Characterised by peripheral polyneuropathy, cerebellar ataxia, retinitis pigmentosa, and ichthyosis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Joubert Syndrome: Characterised by cerebellar vermis hypoplasia and malformed brainstem. Signs and symptoms include ataxia, hyperpnea, hypotonia, abnormal eye movements, seizures, and impaired intellectual development. A characteristic sign of an inverted “molar tooth” sign seen in the brainstem and cerebellum. Option C. Friedrich Ataxia: Most common autosomal recessive ataxia caused due to unstable trinucleotide repeat of GAA at chromosome 9q13 which encodes frataxin (iron-binding protein). Usually seen between 2 and 15 years with slowly progressive ataxia. Symptoms include dysarthria, absent tendon reflexes, extensor plantar response, pes cavus, scoliosis, loss of position and vibration sense, and hypertrophic cardiomyopathy. Option D. Miller-Fisher syndrome is a variant of Guillain-Barre Syndrome in which a previously well child develops ataxia, ophthalmoplegia and areflexia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old boy is brought to the clinic with complaints of breathing difficulties, unsteady walking, and abnormal eye movements. An MRI scan of the brain was ordered and showed the following: What is the most likely diagnosis?", "options": [{"label": "A", "text": "Joubert syndrome", "correct": true}, {"label": "B", "text": "Refsum Disease", "correct": false}, {"label": "C", "text": "Friedreich ataxia", "correct": false}, {"label": "D", "text": "Miller-Fischer Syndrome", "correct": false}], "correct_answer": "A. Joubert syndrome", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884453533-QTDK045012IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Joubert syndrome Joubert Syndrome: Characterised by cerebellar vermis hypoplasia and malformed brainstem. A characteristic MRI sign of an inverted “molar tooth” sign is seen in the brainstem and cerebellum. Signs and symptoms include ataxia, hyperpnea, hypotonia, abnormal eye movements, seizures, and impaired intellectual development.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. Refsum Disease: Autosomal recessive disorder of α-oxidation where phytanic acid is not metabolised into pristanic acid. Characterised by peripheral polyneuropathy, cerebellar ataxia, retinitis pigmentosa, and ichthyosis. Option C. Friedrich Ataxia: Most common autosomal recessive ataxia caused due to unstable trinucleotide repeat of GAA at chromosome 9q13 which encodes frataxin (iron-binding protein). Usually seen between 2 and 15 years with slowly progressive ataxia. Symptoms include dysarthria, absent tendon reflexes, extensor plantar response, pes cavus, scoliosis, loss of position and vibration sense, and hypertrophic cardiomyopathy. Option D. Miller-Fisher syndrome is a variant of Guillain-Barre Syndrome in which a previously well child develops ataxia, ophthalmoplegia and areflexia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old girl is brought to the clinic by her mother with complaints of difficulty walking, repeated fallings, unable to form sentences and altered cognition. She had achieved her developmental milestones in the past. Genetic testing revealed a mutation in the MECP2 gene on the X chromosome. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Rett syndrome", "correct": true}, {"label": "B", "text": "Refsum Disease", "correct": false}, {"label": "C", "text": "Friedreich ataxia", "correct": false}, {"label": "D", "text": "Miller-Fischer Syndrome", "correct": false}], "correct_answer": "A. Rett syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rett syndrome Rett syndrome: Seen exclusively in girls caused due to mutation in the MECP2 gene on the x chromosome.</p>\n<p><strong>Highyeild:</strong></p><p>Symptoms appear between ages 1-4 and are characterised by regression in motor, verbal, and cognitive abilities; ataxia, seizures and growth failure.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. Refsum Disease: Autosomal recessive disorder of α-oxidation where phytanic acid is not metabolised into pristanic acid. Characterised by peripheral polyneuropathy, cerebellar ataxia, retinitis pigmentosa, and ichthyosis. Option C. Friedrich Ataxia: Most common autosomal recessive ataxia caused due to unstable trinucleotide repeat of GAA at chromosome 9q13 which encodes frataxin (iron-binding protein). Usually seen between 2 and 15 years with slowly progressive ataxia. Symptoms include dysarthria, absent tendon reflexes, extensor plantar response, pes cavus, scoliosis, loss of position and vibration sense, and hypertrophic cardiomyopathy. Option D. Miller-Fisher syndrome is a variant of Guillain-Barre Syndrome in which a previously well child develops ataxia, ophthalmoplegia and areflexia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old boy is brought to the clinic by his mother with complaints of abnormal eye movements present even during sleep and sudden jerky movement in limbs. She also complains of increased irritability for the past 1 month. On further examination, a mass per abdomen is felt at the left flank. On further investigation, neuroblastoma was diagnosed in the child. Which of the following is the cause of the presenting symptoms?", "options": [{"label": "A", "text": "Opsoclonus Myoclonus Ataxia", "correct": true}, {"label": "B", "text": "Episodic Ataxia", "correct": false}, {"label": "C", "text": "Hysterical Ataxia", "correct": false}, {"label": "D", "text": "Miller Fisher Syndrome", "correct": false}], "correct_answer": "A. Opsoclonus Myoclonus Ataxia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Opsoclonus Myoclonus Ataxia Opsoclonus Myoclonus Ataxia is characterised by chaotic eye movements (opsoclonus) which even persist during sleep, myoclonus, ataxia, and encephalopathy. Seen in between 6 months and 4 years of age.</p>\n<p><strong>Highyeild:</strong></p><p>Symptoms of encephalopathy are personality change and irritability. Half of the cases are associated with an underlying neuroblastoma</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. Episodic ataxias are due to ion channel mutations . Type 1 is due to a mutation in the potassium channel gene KCNA1 and Type 2 is due to a mutation in the voltage-dependent calcium channel gene. Symptoms of Type 1 include attacks of ataxia and myokymia of the face and limbs lasting for 10 minutes to 6 hours duration and are seen after 5-7 years of age. Symptoms in Type 2 include episodes of ataxia , vertigo, jerk nystagmus, and vomiting lasting for 1 hour to a day and are seen in school age. Option C. Hysterical ataxia is involuntary usually with some secondary gain. It is seen in The child does not have difficulty sitting but when made to stand there is severe swaying from the waist so that she lurches and staggers from one object to the other. Diagnosis is by observation only. Option D. Miller-Fisher syndrome is a variant of Guillain-Barre Syndrome in which a previously well child develops ataxia, ophthalmoplegia and areflexia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 21 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 13 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Which of the following is a recommended antiretroviral treatment regimen for an 11-year-old child (weighing 52 kg) with HIV-1 infection; moderately symptomatic and no renal disease?", "options": [{"label": "A", "text": "Tenofovir + Lamivudine + Efavirenz", "correct": true}, {"label": "B", "text": "Zidovudine + Lamivudine + Efavirenz", "correct": false}, {"label": "C", "text": "Abacavir + Lamivudine + Lopinavir", "correct": false}, {"label": "D", "text": "Abacavir + Lamivudine + Efavirenz", "correct": false}], "correct_answer": "A. Tenofovir + Lamivudine + Efavirenz", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Tenofovir + Lamivudine + Efavirenz In all adolescents (&gt; 10 years of age) with HIV infection and weight &gt; 30 kg, the first-line antiretroviral treatment regimen should be Tenofovir + Lamivudine + Efavirenz; however, this regimen should not be used in children with known renal disease or in those with confirmed HIV-2 infection or HIV-1 and 2 infections.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which Sexually Transmitted Diseases (STDs) are associated with fetal anomalies?", "options": [{"label": "A", "text": "Herpes", "correct": false}, {"label": "B", "text": "Hepatitis", "correct": false}, {"label": "C", "text": "Syphilis", "correct": true}, {"label": "D", "text": "Herpes simplex", "correct": false}], "correct_answer": "C. Syphilis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Syphilis Syphilis infection in pregnancy can have detrimental consequences on the fetus leading to multiple fetal anomalies. Spirochetes can cross the placenta and infect the fetus.</p>\n<p><strong>Highyeild:</strong></p><p>Risk of fetal infection increases with gestational age. Infected placenta and reduced blood flow to the fetus are the most common causes of fetal death. Virtually any organ can be affected after fetal infection occurs due to widespread spirochetal dissemination.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these congenital infections is associated with “salt and pepper” retinopathy in fundus examination?", "options": [{"label": "A", "text": "Chickenpox", "correct": false}, {"label": "B", "text": "Cytomegalo Virus (CMV)", "correct": false}, {"label": "C", "text": "Toxoplasmosis", "correct": false}, {"label": "D", "text": "Rubella", "correct": true}], "correct_answer": "D. Rubella", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rubella Congenital rubella infection can variably involve the fundus . Funduscopic examination in affected children can reveal granular , pigmentary mottling in the macula and periphery, with punctuate hypopigmentation and hyperpigmentation referred to as “salt-and-pepper” retinopathy.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Chorioretinitis and seizures in a 2-year-old child should indicate the following congenital infection", "options": [{"label": "A", "text": "Toxoplasmosis", "correct": true}, {"label": "B", "text": "syphilis", "correct": false}, {"label": "C", "text": "CytomegalaoVirus (CMV)", "correct": false}, {"label": "D", "text": "Rubella", "correct": false}], "correct_answer": "A. Toxoplasmosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Toxoplasmosis Although a significant percentage of infants with congenital toxoplasmosis can have a subclinical infection, other subsets of infants can have findings such as prematurity, Intra Uterine Growth Restriction (IUGR), jaundice, hepatosplenomegaly, pneumonitis, rashes; and particularly neurologic findings including hydrocephalus (sometimes microcephaly), chorioretinitis, intracranial calcifications, and seizures. Therefore a child with seizures and chorioretinitis is likely to have toxoplasmosis infection.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are true about Kangaroo mother care except", "options": [{"label": "A", "text": "Can also be given by the father", "correct": false}, {"label": "B", "text": "Especially for Low Birth Weight( LBW) baby", "correct": false}, {"label": "C", "text": "Effective thermal control", "correct": false}, {"label": "D", "text": "All are true", "correct": true}], "correct_answer": "D. All are true", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All are true Kangaroo mother care, or skin–to–skin contact between a mother and her newborn, is a recommended procedure for keeping low birth weight babies and preterm babies warm and reducing mortality rates among them. It includes skin-to-skin contact , early initiation and frequent or exclusive breastfeeding, and early discharge from the hospital. It can be provided by fathers as well.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old Unimmunised girl presented to pediatric OPD with fever, and sore throat, and the mother informed that the child is unable to swallow food. On examination, the neck appears to be swollen. What can be the diagnosis?", "options": [{"label": "A", "text": "Diphtheria", "correct": true}, {"label": "B", "text": "Pertussis", "correct": false}, {"label": "C", "text": "TB", "correct": false}, {"label": "D", "text": "Mumps", "correct": false}], "correct_answer": "A. Diphtheria", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Diphtheria This is a case of diphtheria caused by Corynebacterium diphtheria .</p>\n<p><strong>Highyeild:</strong></p><p>The symptoms include fever, Sore throat, and dysphagia. The child has a toxic look. A grayish-white pseudomembrane can be seen. The cervical lymph nodes are enlarged leading to a bull neck appearance.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B . Pertussis usually presents in 3 phases and cough with an inspiratory whoop Option C . TB has a cough and fever duration of more than 2 weeks and weight loss can also be seen Option D . Mumps doesn’t present like this but has parotid enlargement.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old child presented with cough and low-grade fever for one month and the mother reported signs of weight loss in the child. You make a provisional diagnosis after completing history taking and clinical examination and report it to the SR who directs you to send for tests. Which one of the following is the best test for the diagnosis of this condition?", "options": [{"label": "A", "text": "Cartridge-based nucleic acid amplification test (CBNAAT)", "correct": true}, {"label": "B", "text": "Enzyme-Linked Immunoassay (ELISA)", "correct": false}, {"label": "C", "text": "Culture", "correct": false}, {"label": "D", "text": "Smear microscopy", "correct": false}], "correct_answer": "A. Cartridge-based nucleic acid amplification test (CBNAAT)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Cartridge-based nucleic acid amplification test (CBNAAT) A cough with low grade fever persisting for a long duration in this case almost a month indicates tuberculosis. There is also the presence of a classic feature of weight loss. All of the given options can be used as tests for TB and are direct pathogen based tests.</p>\n<p><strong>Highyeild:</strong></p><p>Cartridge-based nucleic acid amplification test (CBNAAT) is based on real-time polymerase chain reaction and is considered the best as it identifies the presence of TB bacillus and provides information on rifampicin resistance. Results are available in less than 2 hours. Enzyme-Linked Immunoassay (ELISA) is rarely helpful. It detects antibodies to various antigens of the bacillus. Culture: LJ Lowenstein Jenson media is most commonly used. 7-10 weeks of incubation is necessary for the detection of organisms. Smear microscopy is rarely used nowadays.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-year-old child presents with the following features given in the image together with fever and sore throat. Which of the following special stain is used to identify the organism causing the disease", "options": [{"label": "A", "text": "Indian ink stain", "correct": false}, {"label": "B", "text": "Gram's stain", "correct": false}, {"label": "C", "text": "Albert stain", "correct": true}, {"label": "D", "text": "Giemsa stain", "correct": false}], "correct_answer": "C. Albert stain", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884351463-QTDK042010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Albert stain The given image along with clinical features of fever and sore throat point towards a case of diphtheria caused by Corynebacterium diphtheria . The image showed a bull neck appearance which is due to the enlargement of cervical lymph nodes. Albert stain is a special stain used for diagnosis. Other stains given are not useful in the diagnosis of diphtheria</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child presents to your OPD with complaints of cough and the mother complains that the cough is not improving but becomes more severe and frequent and annoying at night. The SR notices an inspiratory whoop in the child and advised the patient for a nasal swab. What is the causative organism for this disease?", "options": [{"label": "A", "text": "Corynebacterium diphtheria", "correct": false}, {"label": "B", "text": "B. Pertussis", "correct": true}, {"label": "C", "text": "M. tuberculosis", "correct": false}, {"label": "D", "text": "Salmonella typhi", "correct": false}], "correct_answer": "B. B. Pertussis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>B. Pertussis This is a case of pertussis or whooping cough. It is caused by Bordetella pertussis. There are 3 stages in this: The catarrhal phase is the most infectious. The child has a cough and coryza with little nasopharyngeal secretions.</p>\n<p><strong>Highyeild:</strong></p><p>The paroxysmal stage lasts for 2-6 weeks during which the cough progresses to episodic paroxysms of i ncreasing intensity ending with a high-pitched inspiratory whoop. The whoop is produced by the air rushing in during inspiration through the half-open glottis. Convalescent phase recovery occurs in this phase Other organisms listed in the options do not cause pertussis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Match the following with respect to Tuberculosis: Select the correct answer from the given below code:", "options": [{"label": "A", "text": "a1, b2, c4, d3", "correct": true}, {"label": "B", "text": "a4, b3, c1, d2", "correct": false}, {"label": "C", "text": "a3, b1, c4, d2", "correct": false}, {"label": "D", "text": "a2, b4, c3, d1", "correct": false}], "correct_answer": "A. a1, b2, c4, d3", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1690968352463-QTDK042013IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>a1, b2, c4, d3 Culture, Gene Xpert, and Line probe assay are all direct pathogen-based LJ medium is the most commonly used culture medium . Gene Xpert helps in the detection of Right Iliac Fossa (RIF) resistance. It is a nucleic acid amplification test. Line probe assay additionally detects resistance to Isoniazid INH. Mantoux test is a tuberculin sensitivity test used to detect hypersensitivity to mycobacterial antigens.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old Unimmunised child presented to your OPD with a fever, sore throat, and neck that appears to be swollen. You prescribe a test to identify the etiology and the following image is seen in the test. Identify the organism from the given image and clinical features.", "options": [{"label": "A", "text": "Corynebacterium diphtheria", "correct": true}, {"label": "B", "text": "B. Pertussis", "correct": false}, {"label": "C", "text": "M. tuberculosis", "correct": false}, {"label": "D", "text": "Salmonella typhi", "correct": false}], "correct_answer": "A. Corynebacterium diphtheria", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884351852-QTDK042014IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Corynebacterium diphtheria The given image along with clinical features of fever and sore throat point towards a case of diphtheria caused by corynebacterium The image shows Albert stain which is a special stain used for its diagnosis. Other organisms listed in the options do not cause pertussis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-year-old Unimmunised girl child presented with fever, sore throat, and bull neck. A provisional diagnosis of diphtheria was made and treatment started. The mother is worried about the 4-year-old younger sibling. Which of the following is the correct agent of chemoprophylaxis to be used in Close contact?", "options": [{"label": "A", "text": "Erythromycin", "correct": true}, {"label": "B", "text": "Ketoconazole", "correct": false}, {"label": "C", "text": "Nystatin", "correct": false}, {"label": "D", "text": "Amphotericin B", "correct": false}], "correct_answer": "A. Erythromycin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Erythromycin Close-contact of diphtheria patients should be given chemoprophylaxis with erythromycin.</p>\n<p><strong>Highyeild:</strong></p><p>It is a bacteriostatic agent which inhibits the growth of bacteria by binding to the 50s subunit of the rRNA complex and inhibits protein synthesis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Options B, C, and D are all antifungal agents and do not help in this disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Identify the incorrect statement from the following regarding diphtheria:", "options": [{"label": "A", "text": "Incubation period is 2-5 days", "correct": false}, {"label": "B", "text": "Palatal/ocular palsy is seen in 2nd - 3rd week", "correct": false}, {"label": "C", "text": "Laryngeal diphtheria is the most common type", "correct": true}, {"label": "D", "text": "Most common complication is respiratory obstruction.", "correct": false}], "correct_answer": "C. Laryngeal diphtheria is the most common type", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Laryngeal diphtheria is the most common type Diphtheria has the following types: Nasal diphtheria - this is most common in infants Faucial or Tonsillopharyngeal diphtheria - is most common in children Laryngeal diphtheria - is the most serious Type and it is associated with respiratory tract obstruction. Hence Laryngeal diphtheria is not the most common type</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 23 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 37 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Identify the most common risk factor for Cerebral Palsy (CP)", "options": [{"label": "A", "text": "Prematurity", "correct": true}, {"label": "B", "text": "Meningitis", "correct": false}, {"label": "C", "text": "Kernicterus", "correct": false}, {"label": "D", "text": "Intracranial hypertension", "correct": false}], "correct_answer": "A. Prematurity", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Prematurity Prematurity is the most common risk factor for Cerebral Palsy (CP)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Correct statement about infantile tremor syndrome?", "options": [{"label": "A", "text": "Progressive disorder", "correct": false}, {"label": "B", "text": "Fine unilateral tremors seen", "correct": false}, {"label": "C", "text": "Often associated with hydrocephalus", "correct": false}, {"label": "D", "text": "Good prognosis", "correct": true}], "correct_answer": "D. Good prognosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Good prognosis Infantile tremor syndrome has been seen in exclusively breastfed infants of vegetarian mothers belonging to economically deprived sections of society.</p>\n<p><strong>Highyeild:</strong></p><p>It is characterized by pallor, skin pigmentation (particularly knuckle pigmentation), hair changes (variable pigmentation, sparse and rough hairs), tremors and developmental delay/regression. Tremors are of acute onset, seen in limbs, head, face and tongue (more prominent in distal parts); are initially intermittent then become continuous. The etiology has been elusive but appears to be due to multiple nutritional deficiencies. There are reports of successful treatment with vitamin B12 alone, with considerable improvement in symptoms. Anemia and other nutritional deficiencies may also be treated. Usually, most children recover, although some long-term impairment in cognitive and language skills may be seen.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Treatment of choice for infantile tremor syndrome", "options": [{"label": "A", "text": "Valproate", "correct": false}, {"label": "B", "text": "Diazepam followed by phenytoin", "correct": false}, {"label": "C", "text": "Low-dose amitriptyline", "correct": false}, {"label": "D", "text": "Correction of anaemia and nutritional deficiencies", "correct": true}], "correct_answer": "D. Correction of anaemia and nutritional deficiencies", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Correction of anaemia and nutritional deficiencies Infantile tremor syndrome has been seen in exclusively breastfed infants of vegetarian mothers belonging to economically deprived sections of society. It is characterized by pallor , skin pigmentation (particularly knuckle pigmentation), hair changes (variable pigmentation, sparse and rough hairs), tremors and developmental delay/regression. Tremors are of acute onset, seen in limbs, head, face and tongue (more prominent in distal parts); are initially intermittent then become continuous. The etiology has been elusive but appears to be due to multiple nutritional deficiencies . There are reports of successful treatment with vitamin B12 alone , with considerable improvement in symptoms. Anaemia and other nutritional deficiencies may also be treated. Usually, most children recover, although some long-term impairment in cognitive and language skills may be seen.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is the last fontanelle to close?", "options": [{"label": "A", "text": "Anterior", "correct": true}, {"label": "B", "text": "Posterior", "correct": false}, {"label": "C", "text": "Sphenoid", "correct": false}, {"label": "D", "text": "Mastoid", "correct": false}], "correct_answer": "A. Anterior", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Anterior Timing of closure of different fontanelle – Posterior (0-3 months); Sphenoid (3-6 months); Mastoid (6-18 months); Anterior (18-24 months).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Anterior fontanelle usually closes by", "options": [{"label": "A", "text": "0-3 months", "correct": false}, {"label": "B", "text": "3-6 months", "correct": false}, {"label": "C", "text": "6-18 months", "correct": false}, {"label": "D", "text": "18-24 months", "correct": true}], "correct_answer": "D. 18-24 months", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>18-24 months Timing of closure of different fontanelle – Posterior (0-3 months); Sphenoid (3-6 months); Mastoid (6-18 months); Anterior (18-24 months).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The majority of genes that have been associated with mental retardation are located on", "options": [{"label": "A", "text": "Chromosome 6", "correct": false}, {"label": "B", "text": "Chromosome 12", "correct": false}, {"label": "C", "text": "Chromosome Y", "correct": false}, {"label": "D", "text": "Chromosome X", "correct": true}], "correct_answer": "D. Chromosome X", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Chromosome X Chromosomal abnormalities are thought to be the most common cause of mental retardation. About 10% of cases of mental retardation are due to chromosomal abnormalities. Overall among the genetic causes of mental retardation, almost 30% are probably the result of mutations located in the X chromosome (X-linked mental retardation). The two most important genetic disorders that contribute to mental retardation are Down syndrome followed by Fragile X syndrome.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is the most common inherited cause of mental retardation?", "options": [{"label": "A", "text": "Angelman syndrome", "correct": false}, {"label": "B", "text": "Prader Willi syndrome", "correct": false}, {"label": "C", "text": "Williams syndrome", "correct": false}, {"label": "D", "text": "Fragile X syndrome", "correct": true}], "correct_answer": "D. Fragile X syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Fragile X syndrome Chromosomal abnormalities are thought to be the most common cause of mental retardation. About 10% of cases of mental retardation are due to c hromosomal abnormalities. Overall among the genetic causes of mental retardation, almost 30% are probably the result of mutations located in the X chromosome (X-linked mental retardation). The two most important genetic disorders that contribute to mental retardation are Down syndrome followed by Fragile X syndrome.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The correct sequence of closure of fontanelles", "options": [{"label": "A", "text": "Posterior → Sphenoid → Mastoid → Anterior", "correct": true}, {"label": "B", "text": "Posterior → Mastoid → Sphenoid → Anterior", "correct": false}, {"label": "C", "text": "Mastoid → Sphenoid → Posterior → Anterior", "correct": false}, {"label": "D", "text": "Sphenoid → Posterior → Anterior → Mastoid", "correct": false}], "correct_answer": "A. Posterior → Sphenoid → Mastoid → Anterior", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Posterior → Sphenoid → Mastoid → Anterior Timing of closure of different fontanelle – Posterior (0-3 months); Sphenoid (3-6 months); Mastoid (6-18 months); Anterior (18-24 months).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Not a correct statement about encephalocele", "options": [{"label": "A", "text": "It is a type of Neural tube defect (NTD)", "correct": false}, {"label": "B", "text": "Common in the frontal lobe", "correct": true}, {"label": "C", "text": "Protrusion of neural tissue through the defect", "correct": false}, {"label": "D", "text": "Is a type of closed defect", "correct": false}], "correct_answer": "B. Common in the frontal lobe", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Common in the frontal lobe Encephalocele is a type of serious cranial neural tube defect that is characterized by protrusion of the brain and/or meninges through a defect in the skull. Since the protruding defect is covered with skin, it is a type of closed neural tube defect. Occipital encephalocele represents the most common variety of all encephaloceles. Occipital encephalocele appears to be more common in females compared to males. The incidence of hydrocephalus is also higher in the posterior encephalocele. Frontal lesions may be associated with cleft lip or palate.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Abnormal collection of a tuft of hairs in the lower lumbosacral region usually indicates the presence of", "options": [{"label": "A", "text": "Syringomyelia", "correct": false}, {"label": "B", "text": "Dandy-Walker Syndrome", "correct": false}, {"label": "C", "text": "Spina bifida occulta", "correct": true}, {"label": "D", "text": "Spina bifida cystica", "correct": false}], "correct_answer": "C. Spina bifida occulta", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Spina bifida occulta Patchy localized distribution of tuft of terminal hairs is called localized hypertrichosis . It is most commonly located in the midline over the lumbosacral region and can indicate possible underlying developmental defects. Such abnormal patches of hairs (or even other markers such as dermal sinus or hyperpigmented skin ) commonly overlie spina bifida occulta, a midline defect of fusion of the vertebral arch without protrusion of the spinal cord or meninges. Syringomyelia Dandy-Walker syndrome Spina bifida occulta</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these types of craniosynostosis is commonly referred to as “tower head”?", "options": [{"label": "A", "text": "Scaphocephaly", "correct": false}, {"label": "B", "text": "Brachycephaly", "correct": false}, {"label": "C", "text": "Oxycephaly", "correct": true}, {"label": "D", "text": "Trigonocephaly", "correct": false}], "correct_answer": "C. Oxycephaly", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Oxycephaly Craniosynostosis is the premature fusion of skull sutures that may be isolated or a part of a craniofacial syndrome. Craniosynostosis can be primary or secondary.</p>\n<p><strong>Highyeild:</strong></p><p>Primary craniosynostosis further can be idiopathic or familial, with familial cases associated with mutations in fibroblast growth factor receptor-1 (FGFR1), FGFR2, FGFR3, and twist homolog 1 (TWIST1) genes. Secondary craniosynostosis results secondary to other disorders such as hypercalcemia, hyperthyroidism, renal osteodystrophy, Hurler’s Syndrome, sickle cell disease and thalassemia. One of the types of severe craniosynostosis resulting from premature fusion of multiple sutures, particularly sagittal and coronal sutures, is oxycephaly (also known as turricephaly) which results in a tower-like skull. Crouzon syndrome, Apert syndrome and Pfeiffer syndrome are the most common craniofacial syndromes, accounting for nearly two-thirds of the syndromic cases.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "One of these syndromes is not associated with craniosynostosis", "options": [{"label": "A", "text": "Crouzon syndrome", "correct": false}, {"label": "B", "text": "Angelman syndrome", "correct": true}, {"label": "C", "text": "Apert syndrome", "correct": false}, {"label": "D", "text": "Pfeiffer syndrome", "correct": false}], "correct_answer": "B. Angelman syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Angelman syndrome Craniosynostosis is the premature fusion of skull sutures that may be isolated or a part of a craniofacial syndrome.</p>\n<p><strong>Highyeild:</strong></p><p>Craniosynostosis can be primary or secondary. Primary craniosynostosis further can be idiopathic or familial , with familial cases associated with mutations in fibroblast growth factor receptor-1 (FGFR1), FGFR2, FGFR3, and twist homolog 1 (TWIST1) genes. On the other hand, secondary craniosynostosis results secondary to other disorders such as hypercalcemia, hyperthyroidism, renal osteodystrophy, Hurler’s Syndrome, sickle cell disease and thalassemia. One of the types of severe craniosynostosis resulting from premature fusion of multiple sutures, particularly sagittal and coronal sutures, is oxycephaly (also known as turricephaly) which results in a tower-like skull. Crouzon syndrome, Apert syndrome and Pfeiffer syndrome are the most common craniofacial syndromes, accounting for nearly two-thirds of the syndromic cases. Angelman syndrome- characterized by developmental delay, intellectual disability, autistic features</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common toxoplasmosis, rubella cytomegalovirus, herpes simplex, and HIV (TORCH) infection that has been associated with microcephaly", "options": [{"label": "A", "text": "Congenital rubella", "correct": false}, {"label": "B", "text": "Congenital toxoplasmosis", "correct": false}, {"label": "C", "text": "Congenital syphilis", "correct": false}, {"label": "D", "text": "Congenital CMV", "correct": true}], "correct_answer": "D. Congenital CMV", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Congenital CMV The acronym TORCH refers to the common causative pathogen of congenital infections: Toxoplasma gondii, others (including Treponema pallidum, Listeria, Varicella, and parvovirus B19), Rubella virus, Cytomegalovirus (CMV), and Herpes simplex virus. These congenital infections can cause microcephaly or macrocephaly. Congenital CMV infection is overall the most common congenital infection and commonly causes microcephaly, and mental retardation with radiological features of typical periventricular calcifications. Therefore Cytomegalovirus can be considered the most common congenital infection among the options causing microcephaly.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is the most common cause of obstructive hydrocephalus in children", "options": [{"label": "A", "text": "Mumps", "correct": false}, {"label": "B", "text": "Vitamin A intoxication", "correct": false}, {"label": "C", "text": "Hydrocephalus", "correct": false}, {"label": "D", "text": "Congenital anomaly", "correct": true}], "correct_answer": "D. Congenital anomaly", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Congenital anomaly Hydrocephalus is a common Central Nervous System (CNS) disorder in children associa ted with the expansion of the cerebral ventricles.</p>\n<p><strong>Highyeild:</strong></p><p>It has been divided into obstructive (also called non-communicating) or non-obstructive (also called communicating) hydrocephalus. Traditionally, obstruction to the Cerebrospinal Fluid flow within the ventricular system has been associated with obstructive or non-communicating hydrocephalus while impairment of circulation through the subarachnoid space (for example due to obliteration of subarachnoid cisterns) or defective absorption in the venous system has been associated with non-obstructive or communicating hydrocephalus. The aqueduct is the most common site of intraventricular blockade of Cerebrospinal Fluid flow; with causes of obstruction being congenital or acquired. Congenital aqueductal stenosis is one of the most common causes of o bstructive hydrocephalus in children. Infections such as mumps and toxoplasmosis are acquired causes of aqueductal stenosis in children and can also lead to obstructive hydrocephalus. Diagnosis should be made by measurement of head circumference (particularly in infants), USG (mainly when the anterior fontanelle is open), CT and MRI. Although CT can demonstrate ventricular dilatation, it may further be required to identify the nature of the obstruction, either functionally or anatomically. MRI is the best imaging modality to provide such functional and anatomic information. Two recent techniques for decompressing the ventricles are third ventriculostomy and cannulation of the aqueduct.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of these statements are true about non-obstructive hydrocephalus in children except", "options": [{"label": "A", "text": "Also called communicating hydrocephalus", "correct": false}, {"label": "B", "text": "Obliteration of subarachnoid cisterns can be a cause", "correct": false}, {"label": "C", "text": "Problem in Cerebrospinal fluid (CSF) absorption", "correct": false}, {"label": "D", "text": "All of these are true", "correct": true}], "correct_answer": "D. All of these are true", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of these are true Hydrocephalus is a common Central Nervous System disorder in children associated with the expansion of the cerebral ventricles. It has been divided into obstructive (also called non-communicating) or non-obstructive (also called communicating) hydrocephalus.</p>\n<p><strong>Highyeild:</strong></p><p>Traditionally, obstruction to the non-obstructive (also called communicating) Traditionally, obstruction to the Cerebrospinal fluid Cerebrospinal fluid CSF flow within the ventricular system has been associated with obstructive or non-communicating hydrocephalus while impairment of circulation through the subarachnoid space (for example due to obliteration of subarachnoid cisterns) or defective absorption in the venous system has been associated with non-obstructive or communicating hydrocephalus. The aqueduct is the most common site of intraventricular blockade of CSF flow; causes of obstruction are congenital or acquired. Congenital aqueductal stenosis is one of the most common causes of obstructive hydrocephalus in children. Infections such as mumps and toxoplasmosis are acquired causes of aqueductal stenosis in children and can also lead to obstructive hydrocephalus. Diagnosis should be made by measurement of head circumference (particularly in infants), USG (mainly when the AF is open), CT and Magnetic resonance imaging (MRI). Although CT can demonstrate ventricular dilatation, it may further be required to identify the nature of the obstruction, either functionally or anatomically. Magnetic resonance imaging (MRI) is the best imaging modality to provide such functional and anatomic information. Two recent techniques for decompressing the ventricles are the third ventriculostomy and cannulation of the aqueduct.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Incorrect statement about Chiari 2 malformation", "options": [{"label": "A", "text": "Symptoms early in life", "correct": false}, {"label": "B", "text": "May be associated with hydrocephalus", "correct": false}, {"label": "C", "text": "Flat skull base", "correct": false}, {"label": "D", "text": "Large cyst arising from the fourth ventricle", "correct": true}], "correct_answer": "D. Large cyst arising from the fourth ventricle", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Large cyst arising from the fourth ventricle Arnold Chiari malformations refer to a group of deformities of the hindbrain including cerebellum, pons and medulla oblongata. It usually is because of a small posterior fossa (the skull base may be flat in some cases). The most widely accepted pathophysiological mechanism states that reduction or lack of development of the posterior fossa is the main cause which can be congenital or acquired. Type 1 Chiari malformation is characterized by downward displacement of the cerebellar tonsils through the foramen magnum leading to compression of cerebellar components, the lower brainstem, and the upper cervical spinal cord. In Type 2 Chari malformation, also called classic Chiari malformation, the complete cerebellum and brain stem tissue protrudes into the foramen magnum. It is a more severe type where symptoms appear in early childhood; it is also often accompanied by a myelomeningocele. MRI is the best imaging modality to diagnose this disorder.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common cause of neonatal meningitis", "options": [{"label": "A", "text": "Pseudomonas", "correct": false}, {"label": "B", "text": "H. influenza type B", "correct": false}, {"label": "C", "text": "Gram-negative bacteria", "correct": true}, {"label": "D", "text": "Staphylococcus aureus", "correct": false}], "correct_answer": "C. Gram-negative bacteria", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Gram-negative bacteria Causes of neonatal meningitis differ according to region. Usually, the distribution of organisms seen in neonatal meningitis is almost similar to that in neonatal sepsis. Some, in fact, categorize neonatal meningitis into early-onset and late-onset neonatal meningitis (as in neonatal sepsis). Overall, the most common cause of neonatal meningitis worldwide is Guillain -Barre, accounting for more than 40% of all early-onset infections. It is also the most common cause of early-onset neonatal sepsis worldwide. Gram-negative infections including E. coli and Klebsiella, are also prominent causes of meningitis in the neonatal age group, particularly in countries like India. S. pneumonia and L. monocytogenes are other known causes of neonatal meningitis. Coagulase-negative Staphylococcus is deemed one of the important bacterial causes of late-onset neonatal meningitis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are potential causes of neonatal meningitis except", "options": [{"label": "A", "text": "Staphylococcus", "correct": false}, {"label": "B", "text": "Klebsiella", "correct": false}, {"label": "C", "text": "Listeria", "correct": false}, {"label": "D", "text": "N. meningitides", "correct": true}], "correct_answer": "D. N. meningitides", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>N. meningitides Causes of neonatal meningitis differ according to region. Usually, the distribution of organisms seen in neonatal meningitis is almost similar to that in neonatal sepsis. Some, in fact, categorize neonatal meningitis into early-onset and late-onset neonatal meningitis (as in neonatal sepsis). Overall, the most common cause of neonatal meningitis worldwide is Guillain -Barre syndrome, accounting for more than 40% of all early-onset infections. It is also the most common cause of early-onset neonatal sepsis worldwide. Gram-negative infections including E. coli and Klebsiella, are also prominent causes of meningitis in the neonatal age group, particularly in countries like India. S. pneumonia and L. monocytogenes are other known causes of neonatal meningitis. Coagulase-negative Staphylococcus is deemed one of the important bacterial causes of late-onset neonatal meningitis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are causes of the large head (macrocephaly) except", "options": [{"label": "A", "text": "Rett syndrome", "correct": true}, {"label": "B", "text": "Canavan disease", "correct": false}, {"label": "C", "text": "Alexander disease", "correct": false}, {"label": "D", "text": "Sotos syndrome", "correct": false}], "correct_answer": "A. Rett syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rett syndrome Macrocephaly is usually caused either by an increase in Cerebrospinal Fluid CSF (hydrocephalus or rarely hydrancephaly) or an increase in brain size (megalencephaly). Megalencephaly can further be idiopathic/benign or associated with metabolic disorders.</p>\n<p><strong>Highyeild:</strong></p><p>Metabolic encephalopathies include Canavan’s disease (due to deficiency of aspartoacylase that leads to the accumulation of N-acetyl aspartic acid in the brain and white matter), Alexander disease (mutation in gene encoding glial fibrillary acidic protein [GFAP]) or some lysosomal storage diseases (such as Tay-Sachs disease and Sandhoff disease). Sotos syndrome (also known as cerebral gigantism) is a type of megalencephaly within gigantism associated with mutation of the gene encoding the nuclear receptor set domain containing protease 1 (NSD1) on chromosome 5q35. Affected patients present with a large head, tall stature, seizures, and developmental delay Rett’s syndrome is a neurodevelopmental disorder that occurs almost exclusively in females and is associated with microcephaly (rather than macrocephaly).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which one of these is a neuron migration defect seen in children?", "options": [{"label": "A", "text": "Subacute sclerosing panencephalitis (SSPE)", "correct": false}, {"label": "B", "text": "Holoprosencephaly", "correct": false}, {"label": "C", "text": "Iniencephaly", "correct": false}, {"label": "D", "text": "Schizencephaly", "correct": true}], "correct_answer": "D. Schizencephaly", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Schizencephaly Neuron migration defects are a heterogeneous group of disorders of nervous system development.</p>\n<p><strong>Highyeild:</strong></p><p>They are known to be associated with children with intractable seizures , and neurological and developmental disabilities. Some neuron migration defects include s chizencephaly (cleft in the brain), porencephaly (cavity in the brain), lissencephaly (smooth brain), polymicrogyria (multiple small gyri leading to excessive folding of the brain and an abnormally thick cortex), and corpus callosum agenesis (complete or partial absence of the corpus callosum leading to “racing car sign” or moose head sign” on brain imaging). Iniencephaly is a neural tube defect while holoprosencephaly is a developmental brain defect in which the prosencephalon fails to develop into two hemispheres SSPE or subacute sclerosing panencephalitis is a progressive neurological disorder associated with slow, but persistent, viral infection caused by the defective measles virus.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Identify the most likely disorder seen in the brain imaging below", "options": [{"label": "A", "text": "Arnold Chiari Malformation", "correct": false}, {"label": "B", "text": "Dandy-Walker Syndrome", "correct": false}, {"label": "C", "text": "Hydranencephaly", "correct": true}, {"label": "D", "text": "Obstructive hydrocephalus", "correct": false}], "correct_answer": "C. Hydranencephaly", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884521370-QTDK046030IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hydranencephaly Brain imaging shows a large head with a large sac filled with CerebroSpinal Fluid (CSF) in place of cortical tissue which has atrophied. Thalamus, cerebellum and posterior fossa are preserved. This indicates hydrancephaly.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Kernicterus developing in the neonatal period is most likely associated with which type of cerebral palsy?", "options": [{"label": "A", "text": "Spastic diplegia", "correct": false}, {"label": "B", "text": "Spastic quadriplegia", "correct": false}, {"label": "C", "text": "Dyskinetic palsy", "correct": true}, {"label": "D", "text": "Ataxic palsy", "correct": false}], "correct_answer": "C. Dyskinetic palsy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Dyskinetic palsy Cerebral palsy is the most frequent cause of severe physical disability in childhood.</p>\n<p><strong>Highyeild:</strong></p><p>While Hypoxic-Ischemic Encephalopathy HIE/hypoxia or anoxia in neonates is most commonly associated with spastic cerebral palsy (the most common type in India ), kernicterus which predominantly damages the basal ganglia leads to dyskinetic cerebral palsy (a second most common type of cerebral palsy; can also be caused less commonly by Hypoxic-Ischemic Encephalopathy HIE). Dyskinetic cerebral palsy is characterized by abnormal postures or movements with impaired tone regulation or movement coordination.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is not a risk factor for the recurrence of febrile seizures in children?", "options": [{"label": "A", "text": "Multiple seizures", "correct": false}, {"label": "B", "text": "Age of onset &lt; 18 months of age", "correct": false}, {"label": "C", "text": "Family history", "correct": false}, {"label": "D", "text": "Seizures at high temperatures (&gt; 1050F)", "correct": true}], "correct_answer": "D. Seizures at high temperatures (> 1050F)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Seizures at high temperatures (&gt; 1050F) About 30-50% of febrile seizures can recur; recurrent febrile seizures can increase the risk of epilepsy in later childhood. Common risk factors for the recurrence of febrile seizures are seizures at low temperatures ( &lt; 400 C); multiple seizures; the age of onset of febrile seizures &lt; 18 months; and positive family history.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An epileptic encephalopathy in a child associated with a specific Electroencephalogram EEG pattern showing bursts of slow spike-wave complexes, multiple drug-resistant seizures and intellectual disability is most likely indicative of", "options": [{"label": "A", "text": "Juvenile myoclonic epilepsy", "correct": false}, {"label": "B", "text": "Benign rolandic epilepsy", "correct": false}, {"label": "C", "text": "Landau Kleffner syndrome", "correct": false}, {"label": "D", "text": "Lennox Gastaut syndrome", "correct": true}], "correct_answer": "D. Lennox Gastaut syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Lennox Gastaut syndrome Lennox Gastaut syndrome is a complex and severe childhood epilepsy syndrome characterized by a triad of multiple and concurrent seizure types (often difficult to control), cognitive dysfunction, and slow spike waves on Electroencephalogram (EEG).</p>\n<p><strong>Highyeild:</strong></p><p>Landau Kleffner syndrome is a rare seizure syndrome in children associated with epileptic seizures, aphasia and characteristic. Electroencephalogram (EEG) abnormalities mainly involve the temporoparietal regions. Benign rolandic epilepsy involves the rolandic area of the brain and is considered benign as most children outgrow this disorder by puberty. Juvenile myoclonic epilepsy is also a disorder associated with good prognosis; it is a type of idiopathic generalized epileptic syndrome with myoclonic jerks, Generalized tonic-clonic seizure (GTCS) and sometimes absence seizures associated with interictal Electroencephalogram (EEG) involving diffuse bilaterally symmetrical and synchronous 4–6 Hz polyspike and wave complexes lasting between 0.5–10 seconds.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is a wrong statement about absence seizures in children", "options": [{"label": "A", "text": "Brief spells, loss of awareness", "correct": false}, {"label": "B", "text": "Postictal confusion", "correct": true}, {"label": "C", "text": "Electroencephalogram - 3 per second generalized spike and wave discharges", "correct": false}, {"label": "D", "text": "Valproate is the drug of choice", "correct": false}], "correct_answer": "B. Postictal confusion", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Postictal confusion Absence seizures are characteristically associated with several episodes of brief spells in which the patient has a loss of awareness, is unresponsive and has a behavioural Postictal confusion is not a feature. Diagnosis of absence seizures is usually based on Electroencephalogram (EEG) which shows bilaterally synchronous and symmetrical 3-Hertz spike-and-wave discharges that start and end abruptly. Although ethosuximide is the first-line treatment it is not available in many parts of the world. Valproate is another antiepileptic drug that should be considered as the first-line therapy. Sodium channel blockers such as phenytoin and carbamazepine can worsen absence seizures.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Subependymal nodules and subependymal giant cell astrocytomas should be indicative of", "options": [{"label": "A", "text": "Tuberous sclerosis", "correct": true}, {"label": "B", "text": "Sturge Weber Syndrome", "correct": false}, {"label": "C", "text": "Neurofibomatosis type 1", "correct": false}, {"label": "D", "text": "Von Hippel-Lindau disease VHL disease", "correct": false}], "correct_answer": "A. Tuberous sclerosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Tuberous sclerosis Tuberous sclerosis complex (TSC) is a neurocutaneous syndrome inherited in an autosomal dominant manner. It is associated with mutations in the TSC1 or TSC2 genes and involves hamartoma formation in multiple organ systems.</p>\n<p><strong>Highyeild:</strong></p><p>Neurological manifestations of affected children can be particularly severe including infantile spasms, intractable epilepsy and cognitive disabilities. Histopathological examination of the brains of these children reveals cortical tubers, subependymal nodules, and subependymal giant cell astrocytomas. It is noteworthy that subependymal nodules are observed in about 80% of patients and can transform into subependymal giant cell astrocytomas (which are seen in about 5-15% of cases) leading to progressive hydrocephalus and death.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which among the following is the most common tumour associated with neurofibromatosis in a child?", "options": [{"label": "A", "text": "Juvenile myelomonocytic leukaemia", "correct": true}, {"label": "B", "text": "Acute lymphoblastic leukaemia", "correct": false}, {"label": "C", "text": "Acute monocytic leukaemia", "correct": false}, {"label": "D", "text": "Acute myeloid leukaemia", "correct": false}], "correct_answer": "A. Juvenile myelomonocytic leukaemia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Juvenile myelomonocytic leukaemia Neurofibromatosis is an autosomal dominant phacomatosis, classified as neurofibromatosis type 1 and type 2. Neurofibromatosis type 1 has both cutaneous and non-cutaneous manifestations. Briefly, important features include although are not limited to cafe-au-lait macules (CALM), neurofibromas (that have the buttonhole sign), axillary and inguinal freckling (Crowe sign), hyperpigmentation in the iris (Lisch nodules), optic nerve glioma and long bone dysplasia.</p>\n<p><strong>Highyeild:</strong></p><p>Optic nerve glioma is believed to be the most common Central Nervous System (CNS) tumor in them. Juvenile myelomonocytic leukaemia, a pediatric myelodysplastic syndrome, is also commonly associated with neurofibromatosis type 1. On the other hand, the first clinical signature of neurofibromatosis type 2 is often sudden loss of hearing due to the development of vestibular schwannomas that occur on or around the vestibular branches of both auditory nerves. Brushfield spots that are white raised spots on the periphery of the iris are common in Down’s syndrome (and not seen in neurofibromatosis).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "“Opsomyoclonus” also referred to as “dancing eyes-dancing feet syndrome” is strongly associated with", "options": [{"label": "A", "text": "Medulloblastoma", "correct": false}, {"label": "B", "text": "Neuroblastoma", "correct": true}, {"label": "C", "text": "Wilm’s tumour", "correct": false}, {"label": "D", "text": "Cerebellar astrocytoma", "correct": false}], "correct_answer": "B. Neuroblastoma", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Neuroblastoma Opsoclonus-myoclonus-ataxia syndrome also called “dancing eyes dancing feet syndrome” is a rare inflammatory neurological disorder either occurring as a paraneoplastic manifestation or as an autoimmune syndrome.</p>\n<p><strong>Highyeild:</strong></p><p>It is frequently seen in children and is usually associated with neuroblastoma in pediatric patients (about 50% of patients). Features of this syndrome are opsoclonus (involuntary, multidirectional, high amplitude conjugate eye movements) and myoclonic jerks.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these drugs is not associated with pseudotumor cerebri?", "options": [{"label": "A", "text": "Steroids", "correct": false}, {"label": "B", "text": "Hypervitaminosis A", "correct": false}, {"label": "C", "text": "Salicylic acid", "correct": true}, {"label": "D", "text": "Tetracycline", "correct": false}], "correct_answer": "C. Salicylic acid", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Salicylic acid Pseudotumor cerebri is a disorder associated with Increased Intracranial Pressure ICP due to accumulation of Cerebro Spinal Fluid (CSF) either because of decreased resorption and/or increased production. There is no hydrocephalus and normal CSF cytology. Pseudotumor cerebri has been linked strongly to tetracycline usage; there are also some reports of a possible association with retinoids, hypervitaminosis A and steroid withdrawal. Cases of its possible association with nalidixic acid in infants and young children have also been reported.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Neonatal seizure is associated with the worst prognosis", "options": [{"label": "A", "text": "Subtle", "correct": false}, {"label": "B", "text": "Tonic", "correct": false}, {"label": "C", "text": "Myoclonic", "correct": true}, {"label": "D", "text": "Focal", "correct": false}], "correct_answer": "C. Myoclonic", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Myoclonic Most neonatal seizures are subtle. According to one report, the relative frequencies of different neonatal seizures are subtle seizures (50%); clonic seizures (25%); myoclonic seizures (20%); tonic seizures (5%); and rare non-paroxysmal repetitive behaviours. Myoclonic seizures usually carry the worst prognosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-month-old infant with flexor and extensor spasms, mainly involving the extremities and head/neck; EEG shows high amplitude, chaotic background with frequent multifocal spikes. The drug of choice is", "options": [{"label": "A", "text": "Valproate", "correct": false}, {"label": "B", "text": "Carbamazepine", "correct": false}, {"label": "C", "text": "ACTH (Adrenocorticotropic Hormone)", "correct": true}, {"label": "D", "text": "Lamotrigine", "correct": false}], "correct_answer": "C. ACTH (Adrenocorticotropic Hormone)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>ACTH (Adrenocorticotropic Hormone) Infantile spasms, first described by West in 1841, involve seizures with brief, symmetric axial muscle contraction (neck, trunk, and/or extremities). Their occurrence is usually limited to infancy and is often refractory to conventional antiepileptic drugs. It is associated with poor prognosis, with 1/3 of children dying before 3 years of age and 50% before 10 years of age. Electroencephalogram EEG is characteristic involving high voltage, random, slow waves and spikes in all cortical areas and chaotic background rhythm (hypsarrhythmia). Adrenocorticotropic Hormone ACTH is the drug of choice although vigabatrin is also emerging as a front-line treatment option.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A “tram-track” pattern of calcification on skull X-ray indicates which of these disorders of childhood?", "options": [{"label": "A", "text": "Corpus callosum agenesis", "correct": false}, {"label": "B", "text": "Sturge Weber Syndrome", "correct": true}, {"label": "C", "text": "Tuberous sclerosis", "correct": false}, {"label": "D", "text": "Holoprosencephaly", "correct": false}], "correct_answer": "B. Sturge Weber Syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Sturge Weber Syndrome Sturge-Weber syndrome is the third most common neurocutaneous syndrome after neurofibromatosis and tuberous sclerosis. It involves angiomas of the face, choroid, and leptomeninges. The cause is somatic mosaic mutations in the GNAQ gene on the long arm of chromosome 9. Gyriform calcifications can be seen on the skull radiographs and are classically described as a \"tram-track sign.\" While calcification can be seen on CT along with other changes such as cortical atrophy and leptomeningeal enhancement, the risk of ionizing radiation is a concern; therefore MRI is the brain imaging modality of choice.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following neuron migration defects is often named a “smooth brain” disorder?", "options": [{"label": "A", "text": "Schizencephaly", "correct": false}, {"label": "B", "text": "Porencephaly", "correct": false}, {"label": "C", "text": "Corpus callosum agenesis", "correct": false}, {"label": "D", "text": "Lissencephaly", "correct": true}], "correct_answer": "D. Lissencephaly", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Lissencephaly Neuron migration defects are a heterogeneous group of disorders of nervous system development. They are known to be associated with children with intractable seizures, and neurological and developmental disabilities. Some neuron migration defects include schizencephaly (cleft in the brain), porencephaly (cavity in the brain), lissencephaly (smooth brain), polymicrogyria (multiple small gyri leading to excessive folding of the brain and an abnormally thick cortex), and corpus callosum agenesis (complete or partial absence of the corpus callosum leading to “racing car sign” or moose head sign” on brain imaging). Iniencephaly is a neural tube defect; holoprosencephaly is a developmental brain defect in which prosencephalon fails to develop into two hemispheres; and SSPE or subacute sclerosing panencephalitis is a progressive neurological disorder associated with slow, but persistent, viral infection caused by the defective measles virus.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are features of fetal alcohol syndrome except", "options": [{"label": "A", "text": "Short palpebral fissures", "correct": false}, {"label": "B", "text": "Thin vermilion", "correct": false}, {"label": "C", "text": "Normal growth", "correct": true}, {"label": "D", "text": "Microcephaly", "correct": false}], "correct_answer": "C. Normal growth", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Normal growth Fetal alcohol syndrome is a spectrum of defects associated with the exposure of a fetus to the teratogenic effects of alcohol during pregnancy. Clinical features can vary from mild developmental delay to severe intellectual disability. Facial dysmorphic features include - short palpebral fissures, thin vermilion and smooth philtrum. Young children may demonstrate inattention, impulsivity, and internalizing and externalizing problems.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "One of the following infections is a common acquired cause of aqueductal stenosis in children", "options": [{"label": "A", "text": "Rubella", "correct": false}, {"label": "B", "text": "Toxoplasmosis", "correct": true}, {"label": "C", "text": "Syphilis", "correct": false}, {"label": "D", "text": "Herpes Simplex Virus (HSV)", "correct": false}], "correct_answer": "B. Toxoplasmosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Toxoplasmosis Hydrocephalus is a common CNS disorder in children associated with the expansion of the cerebral ventricles.</p>\n<p><strong>Highyeild:</strong></p><p>It has been divided into obstructive (also called non-communicating) or non-obstructive (also called communicating) hydrocephalus. Traditionally, obstruction to the CSF flow within the ventricular system has been associated with obstructive or non-communicating hydrocephalus while impairment of circulation through the subarachnoid space (for example due to obliteration of subarachnoid cisterns) or defective absorption in the venous system has been associated with non-obstructive or communicating hydrocephalus. The aqueduct is the most common site of intraventricular blockade of Cerebrospinal Fluid (CSF) flow ; with causes of obstruction being congenital or acquired. Congenital aqueductal stenosis is one of the most common causes of obstructive hydrocephalus in children. Infections such as mumps and toxoplasmosis are acquired causes of aqueductal stenosis in children and can also lead to obstructive hydrocephalus. Diagnosis should be made by measurement of head circumference (particularly in infants), USG (mainly when the AF is open), CT and MRI. Although CT can demonstrate ventricular dilatation, it may further be required to identify the nature of the obstruction, either functionally or anatomically. MRI is the best imaging modality to provide such functional and anatomic information. Two recent techniques for decompressing the ventricles are the third ventriculostomy and cannulation of the aqueduct.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common cerebral palsy in preterms as a consequence of periventricular leukomalacia is", "options": [{"label": "A", "text": "Spastic hemiplegia", "correct": false}, {"label": "B", "text": "Spastic quadriplegia", "correct": false}, {"label": "C", "text": "Spastic diplegia", "correct": true}, {"label": "D", "text": "Dyskinetic palsy", "correct": false}], "correct_answer": "C. Spastic diplegia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Spastic diplegia Spastic quadriplegia, the most severe type of spastic cerebral palsy, appears the most common type of cerebral palsy in India. It is frequently associated with seizures and scoliosis. Cognition is also more often than not affected. Spastic hemiplegia is common in preterm infants and is a consequence of hypoxia-induced periventricular leukomalacia seen in them.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is not seen in cerebral palsy", "options": [{"label": "A", "text": "Seizures", "correct": false}, {"label": "B", "text": "Flaccid paralysis", "correct": true}, {"label": "C", "text": "Microcephaly", "correct": false}, {"label": "D", "text": "Ataxia", "correct": false}], "correct_answer": "B. Flaccid paralysis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Flaccid paralysis Cerebral palsy is due to the arrest of brain growth so can be associated with microcephaly, Lethargy with poor intake of feeds and seizures can be the common manifestation in neonates. Ataxic CP can be associated with ataxia; however flaccid paralysis is not seen (more so because cerebral palsy is an Upper Motor Neuron UMN lesion).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 47 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 31 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Time of anatomical closure of ductus arteriosus", "options": [{"label": "A", "text": "Within of few hours after birth", "correct": false}, {"label": "B", "text": "3 days", "correct": false}, {"label": "C", "text": "10 days", "correct": true}, {"label": "D", "text": "3 months", "correct": false}], "correct_answer": "C. 10 days", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>10 days The ductus arteriosus connects the pulmonary artery (from the point of its bifurcation into the right and left pulmonary artery) with the arch of the aorta just distal to the origin of the left subclavian artery. Functional closure of ductus arteriosus occurs shortly after birth (10-15 hours; may take up to 96 hours), while anatomical closure occurs between 10-21 days after delivery.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are major NADAS criteria except", "options": [{"label": "A", "text": "Diastolic murmur", "correct": false}, {"label": "B", "text": "Systolic murmur &lt; Grade III", "correct": true}, {"label": "C", "text": "Cyanosis", "correct": false}, {"label": "D", "text": "Heart failure", "correct": false}], "correct_answer": "B. Systolic murmur < Grade III", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Systolic murmur &lt; Grade III NADAS criteria are used to rule in or rule out the possibility of heart disease in children. There are four primary and five minor criteria. The presence of 1 significant or two minor criteria indicates the presence of heart disease. The primary criteria are Systolic murmur &gt; grade 3; B. Diastolic murmur; C. Heart failure; D. Cyanosis. The minor criteria are Systolic murmur &lt; grade 3; B. Abnormal S2; C. Abnormal ECG; D. Abnormal X-ray; E. Abnormal BP.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Closure of ductus arteriosus after birth occurs due to", "options": [{"label": "A", "text": "Increased release of endothelins from the lungs", "correct": false}, {"label": "B", "text": "Aortic pressure exceeds pulmonary artery pressure", "correct": false}, {"label": "C", "text": "Drop inflow of blood through ductus due to closure of umbilical vessels", "correct": false}, {"label": "D", "text": "Vascular smooth muscle contraction in the presence of high pO2 after the first breath", "correct": true}], "correct_answer": "D. Vascular smooth muscle contraction in the presence of high pO2 after the first breath", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Vascular smooth muscle contraction in the presence of high pO2 after the first breath In fetal life, the low oxygen concentration of the intrauterine environment and prostaglandins released from the placenta keep ductus arteriosus in an open state. As the child is born, the placenta is removed, eliminating a significant source of prostaglandins . Functional closure of ductus arteriosus occurs shortly after birth due to abrupt contraction of the muscular wall of the ductus arteriosus associated with increases in the pO2 with the first breath. True anatomic closure, however, takes a few weeks due to the fibrous proliferation of the intima of the ductus remnant, which is complete in 1-3 weeks.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The highest oxygen saturation in fetal circulation is in", "options": [{"label": "A", "text": "Ascending aorta", "correct": false}, {"label": "B", "text": "Descending aorta", "correct": false}, {"label": "C", "text": "Thoracic IVC", "correct": true}, {"label": "D", "text": "Ductus arteriosus", "correct": false}], "correct_answer": "C. Thoracic IVC", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Thoracic IVC Since the umbilical vein drains directly into the IVC , thoracic IVC is expected to have the highest oxygen concentration in fetal circulation. Vessels Saturation of blood (CHECK) Umbilical vein 80 Thoracic IVC 67 Brachiocephalic artery 62 Ascending aorta 62</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Swiss cheese septum refers to", "options": [{"label": "A", "text": "Part of the atrial septum", "correct": false}, {"label": "B", "text": "Part of the ventricular septum", "correct": true}, {"label": "C", "text": "Part of the atrioventricular septum", "correct": false}, {"label": "D", "text": "Part of the aorticopulmonary septum", "correct": false}], "correct_answer": "B. Part of the ventricular septum", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Part of the ventricular septum Multiple muscular Ventricular Septal Defects VSDs creating a large communication between the two ventricles is also called \"Swiss cheese septum .” Muscular (trabecular) VSDs are the second most common type of VSDs after perimembranous VSD.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A valvular defect that shows a diamond shape in its murmur", "options": [{"label": "A", "text": "Mitral regurgitation", "correct": false}, {"label": "B", "text": "Tricuspid stenosis", "correct": false}, {"label": "C", "text": "Pulmonary regurgitation", "correct": false}, {"label": "D", "text": "Aortic stenosis", "correct": true}], "correct_answer": "D. Aortic stenosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Aortic stenosis Diamond-shaped murmurs or crescendo-decrescendo murmurs progressively increase in intensity, followed by a progressive decrease in power (for example, a mid-systolic or systolic ejection murmur). Aortic stenosis has the classic crescendo-decrescendo (diamond-shaped) pattern and is a mid-systolic murmur. When high-pitched, this murmur is associated with aortic valve or pulmonary insufficiency in the absence of pulmonary hypertension. A low-pitched decrescendo diastolic murmur is typically noted after surgical repair of the pulmonary outflow tract in defects such as Tetralogy of Fallot TOF or patients with absent pulmonary valves.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Congenital heart defect commonly associated with William syndrome", "options": [{"label": "A", "text": "Mitral stenosis", "correct": false}, {"label": "B", "text": "Subvalvular aortic stenosis", "correct": false}, {"label": "C", "text": "Supravalvular aortic stenosis", "correct": true}, {"label": "D", "text": "Subvalvular pulmonary stenosis", "correct": false}], "correct_answer": "C. Supravalvular aortic stenosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Supravalvular aortic stenosis William syndrome is a rare genetic disorder with multisystemic involvement. Children with William syndrome are susceptible to the development of congenital heart defects. The classical heart defect in these children is subvalvular aortic stenosis; others include valvular and peripheral pulmonary stenosis and coarctation of the aorta . Other inherited syndromes with congenital heart disease Syndrome Cardiac Lesion CATCH 22 Interrupted aortic arch, TOF, VSD, persistent truncus arteriosus Down AV canal defect, perimembranous VSD, TOF Turner The bicuspid aortic valve, coarctation Noonan Pulmonic stenosis, ASD Holt Oram Ostium secundum ASD, VSD</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is not one of the major conotruncal abnormalities?", "options": [{"label": "A", "text": "TOF Tetralogy of Fallot", "correct": false}, {"label": "B", "text": "Truncus arteriosus", "correct": false}, {"label": "C", "text": "Coarctation of the aorta", "correct": true}, {"label": "D", "text": "TGA Transposition of the great arteries with ventricular septal defect VSD with PS", "correct": false}], "correct_answer": "C. Coarctation of the aorta", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Coarctation of the aorta Conotruncal anomalies are a broad category of congenital heart defects (CHD) that comprises 10-15% of all CHD. They consist of heart defects involving malformations of the infundibulum (conus arteriosus) and the truncus arteriosus with abnormal ventriculoatrial alignments. Some critical congenital heart defects included in this category are TOF, TGA, truncus arteriosus, interrupted aortic arch, and double outlet right ventricle. Many of these heart defects are associated with genetic syndromes, particularly the deletion of chromosome 22 (DiGeorge syndrome).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Left ventricular hypertrophy can be seen in all of these except", "options": [{"label": "A", "text": "Aortic stenosis", "correct": false}, {"label": "B", "text": "Coarctation of the aorta", "correct": false}, {"label": "C", "text": "Mitral stenosis", "correct": true}, {"label": "D", "text": "None of these", "correct": false}], "correct_answer": "C. Mitral stenosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Mitral stenosis Both aortic stenosis and coarctation of the aorta are left-sided obstructive heart disorders with obstruction below the level of the aortic valve . Therefore, they are likely to cause left ventricular hypertrophy (LVH). The mitral or bicuspid valve is between the left atria and the Left atrial enlargement and right ventricular hypertrophy (RVH) can be seen in pure mitral valve stenosis. However, LVH is always absent in pure mitral stenosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following statements is true about the coarctation of the aorta?", "options": [{"label": "A", "text": "Most common site is distal to the origin of the left subclavian artery", "correct": true}, {"label": "B", "text": "MC's age of presentation is 15-20 years", "correct": false}, {"label": "C", "text": "Upper rib notching is due to collaterals", "correct": false}, {"label": "D", "text": "Right ventricular hypertrophy is common", "correct": false}], "correct_answer": "A. Most common site is distal to the origin of the left subclavian artery", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Most common site is distal to the origin of the left subclavian artery Coarctation of the aorta is a narrowing of the aorta, most commonly occurring just beyond the origin of the left subclavian artery. It is commonly co-associated with the bicuspid aortic valve and is common in Turner syndrome.</p>\n<p><strong>Highyeild:</strong></p><p>Pre-ductal coarctation (constriction above the point of attachment of ductus arteriosus to the aorta) and post-ductal coarctation (constriction below the point of attachment of ductus arteriosus to the aorta) can have different presentations. The latter, in particular, is known to present with upper extremity hypertension (which can cause early-onset coronary artery disease, aortic aneurysm, and cerebrovascular disease in older children), feeble pulses in the lower extremities, and radio-femoral delay. Any age group can be affected from neonates till late adolescence (the first presentation can even be in adults). ECG characteristically shows left ventricular hypertrophy. Collaterals (from intercostals and internal mammary arteries) that allow the blood to bypass the constriction and flow into the lower extremities typically cause notching of the lower ribs. X-ray shows a “figure of 3” appearance.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Differential cyanosis is seen in all of these conditions except", "options": [{"label": "A", "text": "Preductal coarctation with PDA", "correct": false}, {"label": "B", "text": "Persistent pulmonary hypertension of newborns (PPHN)", "correct": false}, {"label": "C", "text": "Interrupted aortic arch", "correct": false}, {"label": "D", "text": "Transposition of the great arteries, TGA with COA with PDA", "correct": true}], "correct_answer": "D. Transposition of the great arteries, TGA with COA with PDA", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Transposition of the great arteries, TGA with COA with PDA Differential cyanosis refers to pink upper extremities and cyanotic lower extremities. It can be associated with PPHN , interrupted aortic arch, and preductal coarctation of the aorta (left-sided obstructive lesions). A TGA with coarctation (with PDA) will result in reverse differential cyanosis where the arms are more cyanotic than the legs.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Fallot’s physiology includes these heart diseases except", "options": [{"label": "A", "text": "Tetralogy of Fallot", "correct": false}, {"label": "B", "text": "Eisenmenger", "correct": true}, {"label": "C", "text": "TGA with ventricular septal defect (VSD) with PS", "correct": false}, {"label": "D", "text": "Tricuspid atresia with VSD", "correct": false}], "correct_answer": "B. Eisenmenger", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Eisenmenger Fallot’s physiology usually involves a ventricular septal defect (VSD) with severe pulmonary stenosis, therefore allowing the right to left shunting at the ventricular level (and thus resulting in cyanosis). Important congenital heart diseases included in Fallot’s physiology include TOF, tricuspid atresia with VSD, Transposition of the great arteries (TGA) with VSD and PS, and double outlet right ventricle with ventricular septal defect (VSD) and PS.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-day-old severely cyanotic child with grade 2/6 holosystolic murmur and a left axis deviation on ECG. The most likely diagnosis is", "options": [{"label": "A", "text": "Total anomalous pulmonary venous return (TAPVR)", "correct": false}, {"label": "B", "text": "Tetralogy of Fallot (TOF)", "correct": false}, {"label": "C", "text": "Transposition of the great arteries (TGA)", "correct": false}, {"label": "D", "text": "Tricuspid atresia", "correct": true}], "correct_answer": "D. Tricuspid atresia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Tricuspid atresia A cyanotic heart defect presenting early in life and associated with LVH should arouse suspicion of tricuspid atresia , particularly if pulmonary blood flow is compromised.</p>\n<p><strong>Highyeild:</strong></p><p>A patent foramen ovale or Autism spectrum disorder (ASD) allows caval blood (deoxygenated) to enter from the right to left atria and into the left ventricle. Therefore, mixing oxygenated and deoxygenated blood occurs in the left atria, leading to cyanosis immediately after birth. Auscultatory findings usually reveal a single S2 (rarely typically split S2); a holosystolic murmur is generally present, with a crescendo and decrescendo quality, signifying blood flow through the VSD.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Wrong statement about coarctation of the aorta", "options": [{"label": "A", "text": "Symptoms can be present in the neonatal period", "correct": false}, {"label": "B", "text": "Collaterals can develop from intercostal and internal mammary arteries", "correct": false}, {"label": "C", "text": "Sign of 3 on X-ray", "correct": false}, {"label": "D", "text": "Frequently associated with RVH", "correct": true}], "correct_answer": "D. Frequently associated with RVH", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Frequently associated with RVH Coarctation of the aorta is a narrowing of the aorta, most commonly occurring just beyond the origin of the left subclavian artery. It is widely co-associated with the bicuspid aortic valve and is common in Turner syndrome.</p>\n<p><strong>Highyeild:</strong></p><p>Pre-ductal coarctation (constriction above the point of attachment of ductus arteriosus to the aorta) and postductal coarctation (constriction below the point of attachment of ductus arteriosus to the aorta) can have different presentations. The latter, in particular, is known to present with upper extremity hypertension (which can cause early-onset coronary artery disease, aortic aneurysm, and cerebrovascular disease in older children), feeble pulses in the lower extremities, and radio-femoral delay. Any age group can be affected from neonates till late adolescence (the first presentation can even be in adults). Electrocardiogram (ECG) characteristically shows left ventricular hypertrophy. Collaterals (from intercostals and internal mammary arteries) that allow the blood to bypass the constriction and flow into the lower extremities typically cause notching of the lower ribs. X-ray shows a “figure of 3” appearance.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of these statements are truly related to tricuspid atresia except", "options": [{"label": "A", "text": "Split S2", "correct": true}, {"label": "B", "text": "Patent foramen ovale", "correct": false}, {"label": "C", "text": "Pulmonary oligemia", "correct": false}, {"label": "D", "text": "Left axis deviation on Electrocardiogram (ECG)", "correct": false}], "correct_answer": "A. Split S2", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Split S2 A cyanotic heart defect presenting early in life and associated with LVH should arouse suspicion of tricuspid atresia.</p>\n<p><strong>Highyeild:</strong></p><p>A patent foramen ovale or ASD allows caval blood (deoxygenated) to enter from right to left atria and then into the left ventricle. Mixing of oxygenated and deoxygenated blood therefore occurs in the left atria leading to cyanosis immediately after birth. Auscultatory findings usually reveal a single S2 (rarely typically split S2); a holosystolic murmur is generally present, with a crescendo and decrescendo quality, signifying blood flow through the VSD.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-month-old child is brought with signs of failure to thrive. The child has heart failure. Femoral pulses are feeble compared to brachial pulses. The child most likely have", "options": [{"label": "A", "text": "Congenital AS", "correct": false}, {"label": "B", "text": "Coarctation of the aorta", "correct": true}, {"label": "C", "text": "(PDA) Patent ductus arteriosus", "correct": false}, {"label": "D", "text": "Congenital aortoiliac disease", "correct": false}], "correct_answer": "B. Coarctation of the aorta", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Coarctation of the aorta In the coarctation of the aorta, particularly critical coarctation, systemic blood flow is maintained by the ductus arteriosus . As the ductus closes, these patients develop signs of heart failure .</p>\n<p><strong>Highyeild:</strong></p><p>Tachypnea and increased work of breathing that accompanies heart failure in young infants increased nutritional needs. Also, tachypnea frequently interrupts sucking and feeding; therefore, these infants have poor weight gain and become failures to thrive. Moreover, if lower extremity pulses are weak, Congenital Heart Disease CHD that should be the cause of heart failure, and failure to thrive is coarctation of the aorta.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Identify the most common cyanotic congenital heart defect associated with left to right shunt and heart failure in the early pediatric age group.", "options": [{"label": "A", "text": "Atrial Septal defect", "correct": false}, {"label": "B", "text": "Patent ductus arteriosus", "correct": false}, {"label": "C", "text": "Endocardial cushion defect", "correct": false}, {"label": "D", "text": "VSD ventricular septal defect", "correct": true}], "correct_answer": "D. VSD ventricular septal defect", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>VSD ventricular septal defect Congenital Heart Disease (CHD) is the most common ventricular septal defect (VSD). It is a cyanotic heart defect associated with left to right shunt and symptoms of heart failure as early as one month of age. Most common cyanotic heart disease presenting on the first day of life- (TGA)Transposition of the great arteries Most common cyanotic heart disease in childhood- (TOF), Tetralogy of Fallot</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following may be used in the treatment of “tet spells” of TOF, except", "options": [{"label": "A", "text": "Sodium bicarbonate", "correct": false}, {"label": "B", "text": "Propranolol", "correct": false}, {"label": "C", "text": "Phenylephrine", "correct": false}, {"label": "D", "text": "Digoxin", "correct": true}], "correct_answer": "D. Digoxin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Digoxin Tet spells are episodic cyanotic spells due to obstruction to right ventricular outflow in patients with TOF.</p>\n<p><strong>Highyeild:</strong></p><p>Treatment of Tet spells includes Squatting/Knee-to-chest positioning; Oxygen and s/c morphine (for sedation); Inj propranolol or Esmolol; IV infusion of Phenylephrine; and correction of acidosis using Inj Soda bicarbonate. Digoxin is not used in the treatment of cyanotic spells/tet spells.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following disorders are associated with decreased pulmonary vascularity except", "options": [{"label": "A", "text": "Tetralogy of Fallot (TOF)", "correct": false}, {"label": "B", "text": "Tricuspid atresia", "correct": false}, {"label": "C", "text": "Pulmonary atresia", "correct": false}, {"label": "D", "text": "Total anomalous pulmonary venous return (TAPVR)", "correct": true}], "correct_answer": "D. Total anomalous pulmonary venous return (TAPVR)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Total anomalous pulmonary venous return (TAPVR) TOF, tricuspid atresia, and pulmonary atresia are associated with decreased pulmonary vascularity due to obstruction to pulmonary blood flow. Since in TAPVR, the total pulmonary venous return enters the right atrium mixing with systemic venous circulation, the amount of blood in the heart's right side increases, increasing pulmonary vascularity. Cyanotic heart diseases with increased pulmonary blood flow: Total anomalous pulmonary venous return (TAPVC) Transposition of the great arteries (TGA) with VSD Single ventricle Truncus arteriosus Hypoplastic left heart syndrome Cyanotic heart diseases with reduced pulmonary blood flow: Tetralogy of Fallot (TOF) Single ventricle with Pulmonary atresia with Ventricular Septal Defect (VSD) Tricuspid atresia Truncus arteriosus with PS</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A young female presents with a history of dyspnea on exertion. On examination, she has a wide fixed split S2 with grade III ejection systolic murmur in the left second intercostal space. Her ECG shows left axis deviation. The most probable diagnosis is", "options": [{"label": "A", "text": "Total anomalous pulmonary venous return (TAPVR)", "correct": false}, {"label": "B", "text": "Ostium primum ASD", "correct": true}, {"label": "C", "text": "Tricuspid atresia", "correct": false}, {"label": "D", "text": "Ventricular Septal Defect (VSD) with PAH", "correct": false}], "correct_answer": "B. Ostium primum ASD", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ostium primum ASD Tricuspid atresia and TAPVR are cyanotic heart defects. Atrial Septal Defect (ASD) is associated with a broadly fixed split of S2 , while VSD is associated with a wide variable split of S2.</p>\n<p><strong>Highyeild:</strong></p><p>Further in an Atrial Septal Defect (ASD), increased shunt volume across the atrial septum from left to right atria also increases right ventricular stroke volume, thereby creating a large flow of blood across the pulmonary outflow trac t that results in a crescendo-decrescendo ejection systolic murmur. Ostium primum Atrial Septal defects (ASD) are also associated with LVH .</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are true in Atrial Septal Defect(ASD), except", "options": [{"label": "A", "text": "Right atrial hypertrophy", "correct": false}, {"label": "B", "text": "Left atrial hypertrophy", "correct": true}, {"label": "C", "text": "Right ventricular hypertrophy", "correct": false}, {"label": "D", "text": "Pulmonary hypertension", "correct": false}], "correct_answer": "B. Left atrial hypertrophy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Left atrial hypertrophy Atrial Septal Defect -ASD is associated with right atrial (RA), right ventricular (RV), and pulmonary artery (PA) enlargement; however left atrium (LA) is not enlarged. Therefore, a left atrial hypertrophy is unlikely.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are duct-dependent congenital heart defects except", "options": [{"label": "A", "text": "Transposition of the great arteries-TGA with intact septum", "correct": false}, {"label": "B", "text": "Hypoplastic left heart syndrome", "correct": false}, {"label": "C", "text": "Tetralogy of Fallot-ToF", "correct": false}, {"label": "D", "text": "Truncus arteriosus", "correct": true}], "correct_answer": "D. Truncus arteriosus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Truncus arteriosus Duct-dependent Congenital heart defect-(CHD) requires patency of ductus arteriosus to be maintained to allow either pulmonary blood flow (such as Tetralogy of Fallot-TOF, and tricuspid atresia, critical pulmonary stenosis), systemic blood flow (such as coarctation of the aorta and hypoplastic left heart syndrome, interrupted aortic arch and critical aortic stenosis), or for mixing of blood (such as Transposition of the great arteries-TGA). Truncus arteriosus and Total Anomalous Pulmonary Venous Return (TAPVR)(particularly intracardiac TAPVR) are not duct-dependent CHD, but infra cardiac TAPVR, maintaining ductus arteriosus in an open state is contraindicated. Neonates with duct-dependent lesions require prostaglandin E1 for survival.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is a wrong statement about Tetralogy of Fallot(TOF) in children", "options": [{"label": "A", "text": "Heart size is usually normal", "correct": false}, {"label": "B", "text": "Couren Sabot", "correct": false}, {"label": "C", "text": "Ejection systolic murmur", "correct": false}, {"label": "D", "text": "Frequently valvular PS", "correct": true}], "correct_answer": "D. Frequently valvular PS", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Frequently valvular PS TOF is the most common congenital cyanotic heart defect after infancy; and includes pulmonary stenosis (subvalvular) + RVH + VSD + override of the ventricular septum by the aortic root.</p>\n<p><strong>Highyeild:</strong></p><p>Auscultatory findings include a loud single S2 and a harsh ejection systolic murmur of the obstructed subpulmonary outflow tract. Initial clinical presentation is dependent on the severity of pulmonary stenosis . Chest radiographs usually show a normal-size heart silhouette, with an upturned apex and a concave main pulmonary artery segment, commonly known as “boot-shaped” or “coeur en sabot.” ECG shows right axis deviation and an RVH</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "When administering indomethacin in an infant with Patent ductus arteriosus (PDA), which should be the priority of a healthcare provider?", "options": [{"label": "A", "text": "Monitor the heart rate", "correct": false}, {"label": "B", "text": "Monitor the cardiac rhythm", "correct": false}, {"label": "C", "text": "Monitor urine output", "correct": true}, {"label": "D", "text": "Auscultate lung sounds", "correct": false}], "correct_answer": "C. Monitor urine output", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Monitor urine output Indomethacin is one of the approved drugs for medically closing the ductus arteriosus after birth. It is a potent stimulator of ductal closure.</p>\n<p><strong>Highyeild:</strong></p><p>Main mechanism is the inhibition of prostaglandin synthesis; it additionally increases the thickness of the avascular zone by c ausing constriction of circumferential and longitudinal muscle, decreasing blood flow in the vasa vasorum, and causing vessel wall hypoxia with the release of vascular endothelial cell growth factor (VEGF). However, indomethacin has several adverse effects, the most common being a renal failure (transient oliguria and altered renal functions). It also reduces cerebral and mesenteric blood flow; increases the risk of gastrointestinal perforation and Necrotizing Enterocolitis (NEC).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which heart defects are associated with an increased risk of Wolff-Parkinson-White (WPW) syndrome?", "options": [{"label": "A", "text": "Ebstein’s anomaly", "correct": true}, {"label": "B", "text": "Patent ductus arteriosus (PDA)", "correct": false}, {"label": "C", "text": "Tricuspid atresia", "correct": false}, {"label": "D", "text": "Hypoplastic left heart syndrome", "correct": false}], "correct_answer": "A. Ebstein’s anomaly", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ebstein’s anomaly Is associated with a high risk of developing arrhythmias , usually of the tachycardia type. Most of these arrhythmias are based on accessory pathways along the anomalous atrioventricular valve. According to reports, type B of Wolff-Parkinson-White (WPW) syndrome and paroxysmal arrhythmias are seen in more than 50% of these patients.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The typical X-ray appearance of cardio mediastinal silhouette and globular heart due to abnormal convexity of the right atrial border and left atrial enlargement, often referred to as an “egg on a string appearance,” is seen in", "options": [{"label": "A", "text": "Endocardial cushion defect", "correct": false}, {"label": "B", "text": "Ebstein’s anomaly", "correct": false}, {"label": "C", "text": "Supracardiac Total anomalous pulmonary venous return (TAPVR)", "correct": false}, {"label": "D", "text": "Transportation of the great arteries (TGA)", "correct": true}], "correct_answer": "D. Transportation of the great arteries (TGA)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Transportation of the great arteries (TGA) Egg on a string appearance on X-ray suggests a Congenital heart defect (CHD), Transportation of the great arteries (TGA). The string is the narrow superior mediastinum, while the heart below appears globular due to an abnormal convexity of the right atrial border and left atrial enlargement (like an egg). Egg on string appearance seen in TGA Snowman appearance seen in Total anomalous pulmonary venous return(TAPVC)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "About Carey Coomb’s murmur, all are true except", "options": [{"label": "A", "text": "Mid-diastolic murmur", "correct": false}, {"label": "B", "text": "Seen in rheumatic fever", "correct": false}, {"label": "C", "text": "Low-pitch murmur", "correct": false}, {"label": "D", "text": "Can be associated with AR", "correct": true}], "correct_answer": "D. Can be associated with AR", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Can be associated with AR Carey Coomb’s murmur is a low-pitch, mid-diastolic murmur due to rheumatic mitral valvulitis (thickening of the leaflets). It is not associated with The presence of – Carey Coomb’s murmur does not necessarily mean that true mitral stenosis is present.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The least commonly involved valve in rheumatic fever is", "options": [{"label": "A", "text": "Aortic valve", "correct": false}, {"label": "B", "text": "Pulmonary valve", "correct": true}, {"label": "C", "text": "Mitral valve", "correct": false}, {"label": "D", "text": "Tricuspid valve", "correct": false}], "correct_answer": "B. Pulmonary valve", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pulmonary valve Rheumatic fever is a multisystem, immunologically-mediated inflammatory disorder that follows a group A streptococcal infection. It is commonly seen in children between 5-15 years of age. The diagnosis is made by Jone's criteria (now modified by Jone’s criteria). Arthritis is the most common manifestation. Large joints, including knees, ankles, elbows, and wrists, are usually involved. Carditis is the most severe manifestation. Carditis is typically pancarditis, but valvular involvement is the rule. The most commonly involved valve is mitral, while the pulmonary valve is least commonly involved. Subcutaneous nodules are painless, firm, and movable; they rarely occur alone and are usually associated with severe carditis. Erythema marginatum (and not erythema multiforme!!)are non-pruritic rashes commonly seen on the trunk; they are round or serpiginous with pale centers.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child with exertional dyspnea and cyanosis. A typical picture of an X-ray is shown below. What is your diagnosis", "options": [{"label": "A", "text": "Tetralogy of Fallot (TOF)", "correct": false}, {"label": "B", "text": "Transposition of the great arteries (TGA)", "correct": false}, {"label": "C", "text": "Total anomalous pulmonary venous return (TAPVR)", "correct": false}, {"label": "D", "text": "Ebstein’s anomaly", "correct": true}], "correct_answer": "D. Ebstein’s anomaly", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883739838-QTDK025041IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ebstein’s anomaly The X-ray shows a large box-shaped heart (mainly due to a large right atrium that almost fills the entire right hemithorax), indicating a diagnosis of Ebstein’s anomaly.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Factual statement about rheumatic fever", "options": [{"label": "A", "text": "Erythema marginatum common on the trunk", "correct": true}, {"label": "B", "text": "Subcutaneous nodules tender", "correct": false}, {"label": "C", "text": "Knees and ankles rarely affected", "correct": false}, {"label": "D", "text": "Erythema multiforme seen", "correct": false}], "correct_answer": "A. Erythema marginatum common on the trunk", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Erythema marginatum common on the trunk Rheumatic fever is a multisystem, immunologically-mediated inflammatory disorder that follows a group A streptococcal infection. It is commonly seen in children between 5-15 years of age. The diagnosis is made by Jone's criteria (now modified by Jone’s criteria). Arthritis is the most common manifestation. Large joints, including knees, ankles, elbows, and wrists, are usually involved.</p>\n<p><strong>Highyeild:</strong></p><p>Carditis is the most severe manifestation. Carditis is typically pancarditis, but valvular involvement is the rule. The most commonly involved valve is mitral, while the pulmonary valve is least commonly involved. Subcutaneous nodules are painless, firm, and movable; they rarely occur alone and are usually associated with severe carditis. Erythema marginatum (and not erythema multiforme!!)are non-pruritic rashes commonly seen on the trunk; they are round or serpiginous with pale centers.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Cyanotic heart disease without cardiomegaly or CHF is a feature of", "options": [{"label": "A", "text": "Transposition of the great arteries(TGA)", "correct": false}, {"label": "B", "text": "TAPVR", "correct": false}, {"label": "C", "text": "Hypoplastic left heart syndrome", "correct": false}, {"label": "D", "text": "TOF", "correct": true}], "correct_answer": "D. TOF", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>TOF Heart failure is sporadic and is rarely seen in the Tetralogy of Fallot (TOF). The large VSD (most children with TOF have a large non-restrictive VSD) decongests the right ventricle preventing heart failure from developing. However, heart failure in a patient with Tetralogy of Fallot(TOF) can develop in the Following conditions : Presence of severe anemia Presence of Infective endocarditis Presence of systemic- PA shunt as a palliative measure</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 41 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 10 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Which of the following features can be seen in Congenital Rubella syndrome? Patent Ductus Arteriosus (PDA) Cataract Macrocephaly Conductive Deafness Chorioretinitis Select the correct answer from the given below code:", "options": [{"label": "A", "text": "1,2,5 are correct", "correct": true}, {"label": "B", "text": "1,2,3 are correct", "correct": false}, {"label": "C", "text": "3,4,5 are correct", "correct": false}, {"label": "D", "text": "1,4,5 are correct", "correct": false}], "correct_answer": "A. 1,2,5 are correct", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,2,5 are correct The features of Congenital Rubella syndrome are: Blueberry Muffin skin lesions Sensorineural deafness Microcephaly Chorioretinitis Cataract Congenital Heart Disease (CHD) Most common being Patent Ductus Arteriosus (PDA) The classic triad includes cataracts, sensorineural deafness, and Congenital Heart disease (CHD)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A mother brings her neonate to the pediatric OPD with the following problem shown in the image. You also notice the hypoplasia of limbs in the child. What is the diagnosis", "options": [{"label": "A", "text": "Congenital Varicella Syndrome", "correct": true}, {"label": "B", "text": "Congenital Rubella syndrome", "correct": false}, {"label": "C", "text": "Measles", "correct": false}, {"label": "D", "text": "Mumps", "correct": false}], "correct_answer": "A. Congenital Varicella Syndrome", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884389574-QTDK043002IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Congenital Varicella Syndrome The given image shows a cicatrix skin scarring. Cicatrizing skin lesions, hypoplasia of all limbs, cerebral atrophy, and chorioretinitis are all features of Congenital Varicella Syndrome. Congenital Rubella syndrome presents with the classic triad of cataracts, sensorineural deafness, and Congenital Heart Disease(CHD). Measles presents with prodromal symptoms of fever with cough, coryza, and conjunctivitis. Mumps usually presents with painful enlargement of salivary glands.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A Mother came with her 4-weeks old child to a clinic with rashes on his body. on history taking she was having complaints of fever, myalgia, and rash in her 1st trimester. On diagnosis, the baby was found positive for the IgM Rubella antibody in the blood. which of the following triad of complications would you expect to see in this child?", "options": [{"label": "A", "text": "Chorioretinitis, hydrocephalus, intracranial calcifications", "correct": false}, {"label": "B", "text": "Sensorineural hearing loss, blueberry muffin-like rash, microcephaly", "correct": false}, {"label": "C", "text": "Sensorineural hearing loss, cataracts, congenital heart defects", "correct": true}, {"label": "D", "text": "Cataract, cicatricial skin lesions, limb defects", "correct": false}], "correct_answer": "C. Sensorineural hearing loss, cataracts, congenital heart defects", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Sensorineural hearing loss, cataracts, congenital heart defects The child has congenital rubella in this case as the mother is having complaints of rash, myalgia, and fever in 1st trimester. the child is also positive for rubella antibody. So in this condition, the triad of complications that are expected are sensorineural hearing loss (the single most common among infants), congenital cataracts, and congenital heart disease (the most common defect is PDA). Congenital Rubella syndrome has a higher chance of occurrence in the early or first trimester.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Options A. Triad suggests congenital toxoplasmosis and in this initiative, the child is asymptomatic at birth and later presents with mental retardation and deafness. Options B. Triad suggests congenital CMV infection. In this child presents with clinical features like: IUGR Microcephaly Intracranial calcifications SNHL Blueberry muffin-like rash The urine sample is best for its diagnosis Option D. Triad suggests congenital varicella. it mainly occurs if the mother gets infected in 1st half of pregnancy. Its rashes last for 3-7 days and leave behind hypo/hyperpigmented macules.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A pre-term baby in NICU is being evaluated for his features of anemia, thrombocytopenia, and hepatosplenomegaly. CT scan revealed periventricular calcifications. The urine sample was also taken for the diagnosis of an organism using PCR. Which of the following organism is the most likely cause of it?", "options": [{"label": "A", "text": "Toxoplasmosis", "correct": false}, {"label": "B", "text": "Cytomegalovirus", "correct": true}, {"label": "C", "text": "Herpes simplex virus", "correct": false}, {"label": "D", "text": "Rubella", "correct": false}], "correct_answer": "B. Cytomegalovirus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Cytomegalovirus Congenital CMV is the most common congenital infection, transmission, and fetal disease occurring throughout pregnancy. congenital infection can affect all the organ system, periventricular calcification is characteristic. CMV transmission due to blood and blood products can also cause anemia, thrombocytopenia, and hepatosplenomegaly in preterm infants. The diagnosis of congenital CMV is confirmed by a positive IgM in the first 2 weeks of life. Also, the detection of CMV by PCR on Urine/blood is more sensitive. A urine sample is best for its diagnosis Toxoplasmosis presents with intra cranial calcification, hydrocephalus and chorioretinitis. initially child is asymptomatic at birth and later presents with mental retardation and deafness. Therapy with pyrimethamine, sulphadiazine and folinic acid for a 1 year duration is recommanded for all affected children. HSV presents with 3 forms of disease that is limited to skin, eyes and mouth with vesicular eruptions, CNS disease that presents as meningitis with seizures and altered sensorium Rubella presents with classic triad of sensorineural hearing loss, cataract, congenital heart defects. It is most dangerous if mother is affected in 1st trimester. vaccination of all children and adolescent girls are recommanded to reduce the burden of congenital rubella.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following mode of transmission has the least chance of the spread of hepatitis B from the infected mother to the baby?", "options": [{"label": "A", "text": "Transplacental transmission", "correct": false}, {"label": "B", "text": "Breastfeeding", "correct": true}, {"label": "C", "text": "Amniocentesis", "correct": false}, {"label": "D", "text": "Perinatal transmission", "correct": false}], "correct_answer": "B. Breastfeeding", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Breastfeeding The most common mode of transmission of hep B from mother to child can mainly occur via 3 routes - perinatal transmission, transplacental transmission (most frequent mode), and postpartum Amniocentesis also has risk for hep B transmission. Combination of Hb Ig and HBV vaccination in infants born to hep B mother prevents &gt;95 risks of transmission. So, This should be given if the mother is hep B positive.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A healthy male baby was delivered at term. the baby was born to a woman with smear-positive TB and she is on ATT. how will you manage the newborn baby in this case?", "options": [{"label": "A", "text": "BCG + RIFAMPICIN + INH + BREASTFEEDING", "correct": false}, {"label": "B", "text": "BREASTFEEDING + INH FOR 2 MONTHS THEN BCG VACCINE", "correct": false}, {"label": "C", "text": "BREASTFEEDING + INH FOR 6 MONTHS THEN BCG VACCINE", "correct": true}, {"label": "D", "text": "BCG VACCINE + INH FOR 6 MONTHS + STOP BREASTFEEDING", "correct": false}], "correct_answer": "C. BREASTFEEDING + INH FOR 6 MONTHS THEN BCG VACCINE", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>BREASTFEEDING + INH FOR 6 MONTHS THEN BCG VACCINE In a neonate born to a mother with smear-positive TB, breastfeeding along with INH prophylaxis for 3-6 months is recommended. BCG vaccine is recommended at birth or after the completion of prophylaxis (3-6 months in all neonates). When a child is born to a mother with active TB, the main aim is TB-free survival of newborns. It involves detecting active TB lesions.</p>\n<p><strong>Highyeild:</strong></p><p>Prophylaxis with INH (3-6 months) is recommended in neonates born a mothers with TB. breastfeeding is to be continued in this neonate and isolation is recommended only till the mother is infectious or non adherent to treatment. Otherwise, breastfeeding has to be continued. BCG vaccine is recommended in all neonates. however, if the montuex test positive and evidence of disease is found then ATT is started.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old girl, who recently recovered from covid 19 infection, presents with a fever, pain in the abdomen, and skin rashes for 5 days. on further examination, strawberry tongue and enlarged cervical lymph nodes are found bilaterally. the investigations found are as follows: HEART RATE: 120 BPM BP: 90/66 mmHg RR: 22/ minute CRP: 20 mg/l ESR: 80 mm/hr What is the possible diagnosis of this girl?", "options": [{"label": "A", "text": "Mucormycosis", "correct": false}, {"label": "B", "text": "MIS-C", "correct": true}, {"label": "C", "text": "Aspergillosis", "correct": false}, {"label": "D", "text": "KAWASAKI DISEASE", "correct": false}], "correct_answer": "B. MIS-C", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>MIS-C Multisystem inflammatory syndrome in children is a serious condition in which some parts of the body such as the heart, lungs, blood vessels, kidneys, brain, skin, or eyes become severely inflamed. It can have a presentation like Kawasaki disease. Its diagnostic criteria include Children and adolescents 0-18 years of age with fever &gt; 3 days, Vomiting, Diarrhea, Pain in the stomach Skin rash, Rapid breathing, Bilateral conjunctivitis, - Enlarged lymph nodes, Headache/dizziness, Hypotension/shock Along with high ESR(&gt;40mm), high CRP(&gt;5mg/l), and evidence of past covid 19 infection (RTPCR/ANTIGEN POSITIVE).</p>\n<p><strong>Highyeild:</strong></p><p>Kawasaki disease presents with a fever of &gt; 5 days, polymorphous rash, red cracked lips, swelling on the dorsum of hands, and unilateral cervical lymphadenopathy. Mucormycosis presents with rhinosinusitis, facial/eye pain and numbness, and blurring of vision. a biopsy is the most sensitive revealing of ribbon-like, thick, aseptate hyphae. Nasal sinuses are most commonly involved. Aspergillosis causes non-invasive infections like otomycosis, sinusitis, and ABPA. Lungs and sinuses are commonly involved. diagnosis is by radiology and histopathologic demonstration of invasive hyphae.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-day-old baby presented with a rash as given below in the image. which among the following is the most likely cause?", "options": [{"label": "A", "text": "RUBELLA", "correct": true}, {"label": "B", "text": "MEASLES", "correct": false}, {"label": "C", "text": "ERYTHEMA INFECTIOSUM", "correct": false}, {"label": "D", "text": "Chickenpox", "correct": false}], "correct_answer": "A. RUBELLA", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884389643-QTDK043010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>RUBELLA The image shows a BLUEBERRY muffin rash, suggestive of congenital rubella syndrome.</p>\n<p><strong>Highyeild:</strong></p><p>Rubella presents with the classic triad of sensorineural hearing loss , cataracts, and congenital heart defects. maximum damage to the fetus occurs in 1st trimester. infection in 2nd trimester causes deafness mainly. It is most dangerous if the mother is affected in 1st trimester. vaccination of all children and adolescent girls is recommended to reduce the burden of congenital rubella. PDA is the most common congenital heart disease associated with rubella, followed by pulmonary artery stenosis. Chances of transmission are more if infection occurs in the early or first trimester. Measles presents with Koplik's it is spread via droplets with a maximum risk of infection from 3 days before to 5 days after the rash appears. warthin-finkeldey giant cells are pathognomic. Its most common complication is acute otitis media. ERYTHEMA INFECTIOSUM presents first on rash on cheek (slapped cheek appearance), moving from trunk and extremities. it is caused by parvo virus B-19. it is also known as fifth disease. the peak age of transmission is from 5-15 years. Chickenpox has centripetal distribution and dew drops on rose petals apprearance which are very itchy. rashes apprears 24-48 hours after prodromal symptoms. rashes last for 3-7 days and leaves behind hypo/hyperpigmented macules.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Nancy, a neonate was being evaluated for the finding as shown in the image below. The mother's prenatal history was significant for a viral infection in the 1st trimester. On further examination, a grade 3 murmur was heard on auscultation. Which of the following is the most likely cause of this patient's murmur?", "options": [{"label": "A", "text": "Patent ductus arteriosus", "correct": true}, {"label": "B", "text": "Ventricular septal defect", "correct": false}, {"label": "C", "text": "Atrial septal defect", "correct": false}, {"label": "D", "text": "Pulmonary stenosis", "correct": false}], "correct_answer": "A. Patent ductus arteriosus", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884389718-QTDK043012IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Patent ductus arteriosus This image shows a bilateral cataract, with antenatal history of viral infection to the mother, suggestive of congenital rubella syndrome.</p>\n<p><strong>Highyeild:</strong></p><p>Rubella presents with the classic triad of sensorineural hearing loss, cataracts, and congenital heart defects. maximum damage to the fetus occurs in 1st trimester . infection in 2nd trimester causes deafness Chances of transmission of rubella are more if infection occurs in the early or first trimester. PDA is the most common congenital heart disease associated with rubella, followed by pulmonary artery stenosis. grade 3 murmur are herad in this. Frequency of heart disease: PDA &gt; PS&gt; VSD &gt; ASD VSD presents with pan systolic murmur and delayed diastolic murmur .it has usually had grade 4/5 murmurs. ASD presents with ejection systolic murmur usually with grade 2-6 murmurs. Pulmonary stenosis presents with marked right ventricular hypertrophy and prominent 'a' waves in JVP along with grade 2-5 murmur.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which among the following is the correct management of covid 19 in a child having symptoms of mild sore throat, rhinorrhea, diarrhea, vomiting, and no fast breathing?", "options": [{"label": "A", "text": "ADMIT TO COVID WARD", "correct": false}, {"label": "B", "text": "ADMIT IN COVID ICU", "correct": false}, {"label": "C", "text": "HOME ISOLATION", "correct": true}, {"label": "D", "text": "DO AN INVESTIGATION AND GIVE ANTIBIOTICS QUICKLY", "correct": false}], "correct_answer": "C. HOME ISOLATION", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>HOME ISOLATION Mild COVID can be managed by home isolation. According to latest update, remdesivir is approved for the treatment of covid 19 in children &lt; 10 years. Therefore hepatic function test needs to be monitered while administering this drug due to risk of elevation of liver enzyme and bradycardia respectevely.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 20 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 21 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "The absence of cerebral convulsions in the brain, giving a smooth contour, is called", "options": [{"label": "A", "text": "Schizencephaly", "correct": false}, {"label": "B", "text": "Lissencephaly", "correct": true}, {"label": "C", "text": "Porencephaly", "correct": false}, {"label": "D", "text": "Holoprosencephaly", "correct": false}], "correct_answer": "B. Lissencephaly", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Lissencephaly Lissencephaly, or agyria, is characterised by the absence of cerebral convolutions and a poorly formed Sylvian fissure providing a smooth contour to the brain.</p>\n<p><strong>Highyeild:</strong></p><p>Schizencephaly is the presence of unilateral or bilateral clefts within the cerebral hemispheres. Porencephaly is the presence of cysts or cavities within the brain Holo porencephaly is a cleavage abnormality that fails to divide into two cerebral hemisphere</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Moose head sign on brain imaging is associated with which of these neuron migration defects?", "options": [{"label": "A", "text": "Lissencephaly", "correct": false}, {"label": "B", "text": "Porencephaly", "correct": false}, {"label": "C", "text": "Agenesis of corpus callosum", "correct": true}, {"label": "D", "text": "Polymicrogyria", "correct": false}], "correct_answer": "C. Agenesis of corpus callosum", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Agenesis of corpus callosum In Agenesis of the corpus callosum, brain imaging reveals 2 lateral ventricles that are widely spaced and seen as two horns. The third ventricle appears like a head, giving the appearance of a moose head or a racing car.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old boy presented in pediatric OPD with complaints of loose motions for the past 3 days. The mother complains about the decreased urine output in the child. On examination, sunken eyes are present, and skin pinch is slightly delayed. Also, the child is very irritable. Which of the following statements are correct regarding renal failure in this child? Fractional excretion of sodium &lt; 1% BUN/Creatinine &gt;20 Urinary sodium &gt;40meq/L Urinary osmolality &gt;500mosm/L Select the correct answer from given below code:", "options": [{"label": "A", "text": "1,2,3", "correct": false}, {"label": "B", "text": "1,2,4", "correct": true}, {"label": "C", "text": "2,3,4", "correct": false}, {"label": "D", "text": "1,3,4", "correct": false}], "correct_answer": "B. 1,2,4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,2,4 POINTS in favor of prerenal acute kidney failure:- Loose motions for 3 days Decreased urine output, sunken eyes, delayed skin pinch and irritability- indicate some dehydration This child can have prerenal acute kidney injury. Features Prerenal Renal Urine specific gravity Urine sodium (mEq/L)* &gt;1.020 &lt;20 &lt;1.010 &gt;40 Urine osmolality (mOsm/kg) &gt;400 &lt;350 Fractional excretion of sodium % &lt;1 &gt;1 Blood urea nitrogen/creatinine &gt;20 &lt;20</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old female presented in pediatric OPD with complaints of increased frequency of urination and increased thirst. On examination, vitals are stable. No other findings on examination were present. Input-output charting revealed polyuria. Blood investigations showed hypokalemia with metabolic alkalosis. A urine examination showed hypercalciuria. The child might be suffering from?", "options": [{"label": "A", "text": "Gitelman syndrome", "correct": false}, {"label": "B", "text": "Liddle syndrome", "correct": false}, {"label": "C", "text": "Barter syndrome", "correct": true}, {"label": "D", "text": "Alport’s syndrome", "correct": false}], "correct_answer": "C. Barter syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Barter syndrome Points in favour of barter syndrome: Frequency of urination and increased thirst-polyuria polydipsia Hypokalemia with metabolic alkalosis Hypercalciuria Bartter syndrome Inheritance Autosomal recessive Defect Clinical features Defects in sodium, chloride, and potassium transport in ascending loop of Henle resemble those seen with chronic use of loop diuretics Recurrent episodes of polyuria with dehydration, failure to thrive, nonspecific fatigue, dizziness, and chronic constipation. Older children may also present with muscle cramps and weakness secondary to chronic hypokalemia Diagnosis hypokalemic hypochloremic metabolic alkalosis Urinary calcium levels are typically elevated. Urinary potassium and sodium levels Serum renin, aldosterone, and prostaglandin E levels were elevated. Nephrocalcinosis, resulting from hypercalciuria Magnesium levels are normal.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old female presented in pediatric OPD with complaints of recurrent muscular cramps. On examination, vitals are stable. No other significant findings on examination were seen. Blood and urine investigations revealed hypokalemia, metabolic alkalosis and hypomagnesemia. The infant might be suffering from?", "options": [{"label": "A", "text": "Gitelman syndrome", "correct": true}, {"label": "B", "text": "Liddle syndrome", "correct": false}, {"label": "C", "text": "Barter syndrome", "correct": false}, {"label": "D", "text": "Alport’s syndrome", "correct": false}], "correct_answer": "A. Gitelman syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Gitelman syndrome Points in favour of Gitelman syndrome: Recurrent muscular cramps Hypokalemia, metabolic alkalosis and hypomagnesemia Gitelman Syndrome pathogenesis Defective sodium chloride cotransporter in distal convoluted tubule resemble those of chronic use of thiazide diuretics. Clinical features diagnosis present at a later age history of recurrent muscle cramps and spasms, presumably caused by low serum magnesium levels, nocturia, polyuria adolescent or adult presenting with hypokalemic hypochloremic metabolic alkalosis hypomagnesemia, and hypocalciuria without hypertension</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Liddle syndrome- In collecting duct, gain-of-function mutations of gene that encodes epithelial sodium channel (ENaC) Option: C. Hypomagnesimia is not seen in barter syndrome Hypertension with hypokalemic metabolic alkalosis seen Option: D. Alport syndrome-sensorineural deafness with glomerulonephritis with ocular changes seen Reference: Textbook of Pediatrics, Nelson , 21st Edition, Page No. 2768-2770</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3 months old infant presented in pediatric opd with complains of increased urination and not gaining weight. Examination findings are normal. Investigations reveal blood ph -7. 5, bicarbonate – 28meq/L, potassium – 2. 2meq/l, sodium -124meq/l and chloride of 86meq/l. Usg abdomen done reveals medullary nephrocalcinosis. Which of the following statements are true about this condition? Autosomal recessive Decreased potassium absorption from thick descending loop Hyperkalemic alkalosis Presents in neonate with ototoxicity have bartin gene mutation Select the Correct Answer from given below code:-", "options": [{"label": "A", "text": "1,2,3", "correct": false}, {"label": "B", "text": "1,2,4", "correct": true}, {"label": "C", "text": "2,3,4", "correct": false}, {"label": "D", "text": "1,3,4", "correct": false}], "correct_answer": "B. 1,2,4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,2,4 Bartter syndrome Inheritance Autosomal recessive Defect Clinical features Defect in sodium, chloride, and potassium transport in ascending loop of Henle resemble those seen with chronic use of loop diuretics Recurrent episodes of polyuria with dehydration, failure to thrive, nonspecific fatigue, dizziness, and chronic constipation. Older children may also present with muscle cramps and weakness secondary to chronic hypokalemia Diagnosis hypokalemic hypochloremic metabolic alkalosis Urinary calcium levels are typically elevated Urinary potassium and sodium levels Serum renin, aldosterone, and prostaglandin E levels elevated Nephrocalcinosis, resulting from hypercalciuria Magnesium levels are normal</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In the Final year exam, you are given a case of 4 years old boy with acute gastroenteritis who presented in pediatric opd in a state of severe dehydration. The mother complained that the child did not pass any urine for 12 hours. The examiner asked the student about the definition of acute kidney injury", "options": [{"label": "A", "text": "Increase in serum creatinine by ≥ 0. 3 mg/dL from baseline within 48 hr", "correct": false}, {"label": "B", "text": "Increase in serum creatinine to ≥ 1. 5 times baseline within the prior 7 days", "correct": false}, {"label": "C", "text": "Urine volume ≤ 0. 5 mL/kg/hr for 6 hr", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above ACUTE KIDNEY INJURY DEFINITION Increase in serum creatinine by ≥ 0. 3 mg/dL from baseline within 48 hours or Increase in serum creatinine to ≥ 1. 5 times baseline within prior 7 days or Urine volume ≤ 0. 5 mL/kg/hr for 6 hours</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old male presented in pediatric opd with complaints of recurrent episodes of vomiting and loose motions for 1 day. The mother complains that the child has not passed urine for the past 12 hours. In children, diagnosis of acute renal failure is made if urine output is below?", "options": [{"label": "A", "text": "0. 3ml/kg/hr for 12 hrs", "correct": false}, {"label": "B", "text": "0. 3ml/kg/hr for 24 hrs", "correct": false}, {"label": "C", "text": "0. 5ml/kg/hr for 12 hrs", "correct": true}, {"label": "D", "text": "0. 5ml/kg/hr for 24 hrs", "correct": false}], "correct_answer": "C. 0. 5ml/kg/hr for 12 hrs", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>0. 5ml/kg/hr for 12 hrs KDIGO STAGING OF ACUTE KIDNEY INJURY Stage Serum creatinine Urine output 1 1.5-1.9 times baseline OR =0.3 mg/dl increase &lt;0.5 ml/kg/hr for 6-12 hr 2 2.0-2.9 times baseline &lt;0.5 mL/kg/hr for = 12 hr 3 3.0 times baseline, OR SCr = 4.0 mg/dL, OR Initiation of renal replacement therapy, OR eGFR&lt; 35 mL/min per 1. 73 m2 (&lt; 18 yr) &lt;0. 3 mL/kg/hr for = 24 hr, OR Anuria for 12 hr</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-Year-old male presented in pediatric opd with complaints of recurrent episodes of polyuria with dehydration. Blood investigations reveal hypokalemic hypochloremic metabolic alkalosis. A provisional diagnosis of Bartter syndrome is kept in mind. Which of the following findings can be seen in this patient? Nephrocalcinosis Raised urinary chloride levels Elevated serum renin levels Hypomagnesemia Select the correct answer from given below code:", "options": [{"label": "A", "text": "1,2,3", "correct": true}, {"label": "B", "text": "1,2,4", "correct": false}, {"label": "C", "text": "2,3,4", "correct": false}, {"label": "D", "text": "1,3,4", "correct": false}], "correct_answer": "A. 1,2,3", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,2,3 Bartter syndrome Inheritance Autosomal recessive Defect Clinical features Defect in sodium, chloride, and potassium transport in ascending loop of Henle resemble those seen with chronic use of loop diuretics Recurrent episodes of polyuria with dehydration, failure to thrive, nonspecific fatigue, dizziness, and chronic constipation. Older children may also present with muscle cramps and weakness secondary to chronic hypokalemia Diagnosis hypokalemic hypochloremic metabolic alkalosis Urinary calcium levels are typically elevated Urinary potassium and sodium levels Serum renin, aldosterone, and prostaglandin E levels elevated Nephrocalcinosis, resulting from hypercalciuria Magnesium levels are normal</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old boy presented in pediatric opd with complaints of loose motions for the past 3 days. The mother complains that the child has not passed urine for the past 1 day. On examination, peripheral pulses were feeble, cold extremities and capillary refill time prolonged. Blood pressure low investigations revealed uremia. What are the complications of acute kidney injury? Metabolic alkalosis Hyperkalemia Hyperphosphatemia Hyponatremia Select the correct answer from given below code:-", "options": [{"label": "A", "text": "1,2,3", "correct": false}, {"label": "B", "text": "1,2,4", "correct": false}, {"label": "C", "text": "1,3,4", "correct": false}, {"label": "D", "text": "2,3,4", "correct": true}], "correct_answer": "D. 2,3,4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2,3,4 COMPLICATIONS IN AKI Metabolic Hyperkalemia Metabolic acidosis Hyponatremia Hypocalcemia Hyperphosphatemia Cardiopulmonary Pulmonary edema Arrhythmias Hypertension Neurologic Irritability Seizures Mental status Changes Hematological Infectious Anemia Bleeding Pneumonia Septicemia UTI</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-month-old infant presented in pediatric opd complaining of increased urination and weight loss. Examination findings are normal. Investigations reveal blood ph -7. 5, bicarbonate – 28meq/L, potassium – 2. 2meq/l, sodium -124meq/l and chloride of 86meq/l. Usg abdomen done reveals medullary nephrocalcinosis. The most likely diagnosis in this patient is?", "options": [{"label": "A", "text": "Pseudohypoaldosteronism", "correct": false}, {"label": "B", "text": "Primary hyperaldosteronism", "correct": false}, {"label": "C", "text": "Bartter syndrome", "correct": true}, {"label": "D", "text": "Gitelman syndrome", "correct": false}], "correct_answer": "C. Bartter syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Bartter syndrome Bartter syndrome Inheritance Autosomal recessive Defect Clinical features Defect in sodium, chloride, and potassium transport in ascending loop of Henle resemble those seen with chronic use of loop diuretics Recurrent episodes of polyuria with dehydration, failure to thrive, nonspecific fatigue, dizziness, and chronic constipation. Older children may also present with muscle cramps and weakness secondary to chronic hypokalemia Diagnosis hypokalemic hypochloremic metabolic alkalosis Urinary calcium levels are typically elevated Urinary potassium and sodium levels Serum renin, aldosterone, and prostaglandin E levels elevated Nephrocalcinosis, resulting from hypercalciuria Magnesium levels are normal</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Severe salt wasting and hyperkalemia present. Option: B. Primary hyperaldosteronism - hypertension, hypernatremi and hypokalemia are seen. Option: D. Nephrocalcinosis is not seen in Gitelman syndrome.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-month-old infant was brought to the OPD complaining of decreased urine output and swelling of the whole body. Laboratory investigation showed low levels of Serum albumin. A genetic study showed a mutation in the NPHS1 gene. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Autosomal Recessive Polycystic Kidney Disease", "correct": false}, {"label": "B", "text": "Autosomal Dominant Polycystic Kidney Disease", "correct": false}, {"label": "C", "text": "Finnish type Congenital Nephrotic Syndrome", "correct": true}, {"label": "D", "text": "Nephronophthisis-Medullary Cystic Disease Complex", "correct": false}], "correct_answer": "C. Finnish type Congenital Nephrotic Syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Finnish type Congenital Nephrotic Syndrome Congenital nephrotic syndrome mostly presents within 3 months of life and can be due to numerous causes.</p>\n<p><strong>Highyeild:</strong></p><p>Finnish-type congenital nephrotic syndrome is an autosomal recessive disease caused due to mutations in the gene NPHS1 which encodes for nephrin. Renal histology shows microcystic dilation of proximal tubules.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. ARPKD is caused by mutations in the PKHD1 gene encoding fibrocystin or polyductin characterised by fusiform dilation of collecting tubules arranged radially from the cortex to the medulla. USG shows enlarged ‘bright’ kidneys, loss of corticomedullary differentiation and usually without visible cysts. Option: B. ADPKD is caused by mutations in ADPKD1 or ADPKD2 genes usually seen in the third decade. USG shows multiple cysts in each kidney. Option: D. Nephronophthisis-Medullary Cystic Disease Complex caused due to mutations in NPHP 1-9 encoding nephrocystins usually present in 1st decade of life with polydipsia, polyuria or enuresis, growth retardation and renal insufficiency. Diagnosis of nephronophthisis is supported by the ultrasound finding of small kidneys with corticomedullary cysts and poor corticomedullary differentiation. Renal histology shows cysts involving the collecting ducts, tubular dilation with atrophy and interstitial fibrosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-year-old Child is brought to the clinic complaining of whole-body puffiness and decreased urine output. Laboratory investigation showed low serum albumin levels, and a diagnosis of congenital nephrotic syndrome was made. Which of the following is/are causes of congenital nephrotic syndrome?", "options": [{"label": "A", "text": "Denys-Drash syndrome", "correct": false}, {"label": "B", "text": "Infections", "correct": false}, {"label": "C", "text": "Mutation in NPHS1 gene", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Congenital nephrotic syndrome mostly presents within 3 months of life with anasarca, hypoalbuminemia and oliguria. It can be due to numerous causes .</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Denys Drash syndrome caused due to mutations in the WT1 gene , including congenital nephrotic syndrome, male pseudohermaphroditism and high risk of bilateral Wilms tumour. Option: B. Infections like congenital syphilis, cytomegalovirus disease, and toxoplasmosis can cause congenital nephrotic syndrome . Option: C. Mutation in NPHS 1 encoding nephrin causes Finnish-type congenital nephrotic syndrome . Other mutations associated with congenital nephrotic syndrome include NPHS 2 and PLCE 1.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-month-old boy is brought to the clinic complaining of generalised swelling and decreased urine output. On examination, there is a palpable mass felt at both flanks and the presence of ambiguous genitalia. Renal biopsy shows diffuse mesangial sclerosis on histology. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Denys-Drash syndrome", "correct": true}, {"label": "B", "text": "Beckwith-Wiedemann syndrome", "correct": false}, {"label": "C", "text": "WAGR syndrome", "correct": false}, {"label": "D", "text": "Finnish type congenital nephrotic syndrome", "correct": false}], "correct_answer": "A. Denys-Drash syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Denys-Drash syndrome Patients with Denys-Drash syndrome show mutations in the WT1 gene, congenital nephrotic syndrome, male pseudohermaphroditism, and a high risk of bilateral Wilms tumour.</p>\n<p><strong>Highyeild:</strong></p><p>Renal histology is characterised by diffuse mesangial sclerosis , which can progress to renal failure. Congenital nephrotic syndrome is present in the first 3 months of life with anasarca, hypoalbuminemia and oliguria.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Beckwith-Widemann syndrome includes hemihypertrophy, macroglossia , omphalocele, organomegaly and WT2 deletion at 11p15 Option: C. WAGR syndrome stands for Wilms tumour, Aniridia, genitourinary abnormalities and mental retardation. WT1 gene deletion at 11p13 is seen here. Option: D. Finnish-type congenital nephrotic syndrome is an autosomal recessive disease caused due to mutations in the gene NPHS1 which encodes for nephrin. Renal histology shows microcystic dilation of proximal tubules.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-month-old infant is brought to the clinic with complaints of generalised swelling and decreased urine output. A diagnosis of congenital nephrotic syndrome is made. Which histological change is/are expected to be seen in this condition?", "options": [{"label": "A", "text": "Microcystic dilation of proximal tubules", "correct": false}, {"label": "B", "text": "Diffuse mesangial sclerosis", "correct": false}, {"label": "C", "text": "Focal segmental glomerulosclerosis.", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Congenital nephrotic syndromes mainly present within 3 months of life with anasarca, hypoalbuminemia and oliguria and can be due to numerous causes. Option: A. Finnish-type congenital nephrotic syndrome is an autosomal recessive disease caused due to mutations in the gene NPHS1 which encodes for nephrin. Renal histology shows microcystic dilation of proximal tubules. Option: B. Patients with Denys Drash syndrome show mutations in the WT1 gene, congenital nephrotic syndrome, male pseudohermaphroditism, and a high risk of bilateral Wilms tumour. Renal histology is characterised by diffuse mesangial sclerosis. Option: C. Rarely renal histology in congenital nephrotic syndrome may be normal (minimal change disease) or show focal segmental glomerulosclerosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year-old boy presents to the clinic with severe diarrhoea, decreased urine output and lethargy for 3 days. After admission to the wards, blood investigation showed an increase in serum creatinine to 1.075 mg/dl (Normal S Creatinine for this age group: 0.2-0.43 mg/dl) and urine output 2ml/hour (Body wt: 10 kg) since last 14 hours. Which stage of AKI is this based on KDIGO criteria?", "options": [{"label": "A", "text": "Stage 1", "correct": false}, {"label": "B", "text": "Stage 2", "correct": true}, {"label": "C", "text": "Stage 3", "correct": false}, {"label": "D", "text": "Stage 4", "correct": false}], "correct_answer": "B. Stage 2", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Stage 2 Stage 2 of AKI, according to KDIGO criteria, includes an increase in serum creatinine to more than 200% to 300% (&gt;2 to 2.9 fold) from baseline and urine output less than 0.5 mL/kg per hour for &gt; 12 hours.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Stage 1 of AKI, according to KDIGO criteria, includes an increase in serum creatinine of &gt;0.3 mg/dl over 48 hours or &gt;150% to 200% (1.5-2 fold) from baseline in last 7 days and urine output less than 0.5 mL/kg per hour for &gt;6 hours Option: C. Stage 3 of AKI according to KDIGO criteria include an increase in serum creatinine to more than 300% and urine output less than 0.3 mL/kg per hour for 24 hours. Option: D. KDIGO criteria enlists only 3 stages of AKI, and there is no 4th stage.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 9-year-old boy was diagnosed with AKI with a rapid increase in serum creatinine levels to more than 4 mg/dL and anuria for 12 hours. The child is toxic and was suffering from gastroenteritis. What stage of AKI is based on KDIGO criteria?", "options": [{"label": "A", "text": "Stage 1", "correct": false}, {"label": "B", "text": "Stage 2", "correct": false}, {"label": "C", "text": "Stage 3", "correct": true}, {"label": "D", "text": "Stage 4", "correct": false}], "correct_answer": "C. Stage 3", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Stage 3 As per KDIGO criteria: Stage 1 Increase in serum Cr. Of &gt;0.3mg/dL in 48 hours or 1.5 to 2 fold increase in sr. Creatinine levels from baseline in 7 days. Urine output of less than 0.5mL/ kg per hour for more than 6 hours.</p>\n<p><strong>Highyeild:</strong></p><p>Stage 2 Increase in serum Cr. to 2 to 3 fold from baseline Urine output of less than 0.5mL/kg per hour for more than 12 hours Stage 3 Increase in serum Cr. to 3 fold from baseline or serum creatinine of 4mg/dL with acute rise of 0.5mg/dL Urine output of less than 3 mL/kg per hour for 24 hours or anuria for 12 hours.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-year-old child came to the paediatric clinic with a history of throat infection a week back for which the mother consulted a local doctor and was treated there. Now the child presents with decreased urinary output and seizures for 2 days. On further evaluation, the child was found to have increased serum creatinine, i.e. 4 mg/dL. The patient was evaluated for AKI and was referred for dialysis. Which of the following is not the indication for dialysis in AKI?", "options": [{"label": "A", "text": "Severe acidosis", "correct": false}, {"label": "B", "text": "Persistent Hyperkalemia", "correct": false}, {"label": "C", "text": "Uraemic encephalopathy", "correct": false}, {"label": "D", "text": "Anemia", "correct": true}], "correct_answer": "D. Anemia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Anemia Anemia should be treated with packed red cells transfusion.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A, B &amp; C. Pulmonary hypertension, Persistent Hyperkalemia and Uraemic encephalopathy, all of these are absolute indications for dialysis in AKI. Other major indications are hyponatremia (&lt;120mEq /L), Hypernatremia, severe metabolic acidosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-day-old newborn baby weighing 3 kg is passing urine at a rate of 0.7 mL/hour. Serum creatinine is 2 mg/dl. Which of the following can be a possible cause for renal failure in this newborn?", "options": [{"label": "A", "text": "Perinatal Hypoxemia", "correct": false}, {"label": "B", "text": "Dehydration", "correct": false}, {"label": "C", "text": "Delayed and inadequate breastfeeding", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Newborns are at high risk of AKI , and are suspected when urine output is less than 0.5 mL/kg/hr or when serum creatinine &gt;1.2 mg/dl.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options:- Option A, B &amp; C . Causes of AKI in newborns include perinatal hypoxemia, respiratory distress, dehydration, sepsis, delayed initiation or inadequate breastfeeds, nephrotoxic medications like aminoglycosides, indomethacin etc.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A newborn with acute renal failure was referred for dialysis. Which of the following is the advantage of peritoneal dialysis over hemodialysis?", "options": [{"label": "A", "text": "Anticoagulation is not required", "correct": false}, {"label": "B", "text": "Can be used in hemodynamically unstable patients", "correct": false}, {"label": "C", "text": "Technical expertise not required", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Peritoneal dialysis is the initial renal replacement therapy of choice in sick and unstable infants.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options:- Option: A. Unlike haemodialysis, peritoneal dialysis does not require vascular access and hence no anticoagulation is required. Option: B. Peritoneal dialysis is feasible in hemodynamically unstable patients Option: C. Peritoneal dialysis does not require sophisticated equipment and is easy to perform without much technical expertise.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-month-old infant is brought to the clinic with complaints of low urine output. Serum creatine levels confirmed the diagnosis of acute renal failure. He was referred to higher centres for peritoneal dialysis. Which of the following is true about the procedure?", "options": [{"label": "A", "text": "Exchange of solutes takes place across peritoneal membrane", "correct": true}, {"label": "B", "text": "Exchange is driven by low dextrose content of the dialysate", "correct": false}, {"label": "C", "text": "Cannot be performed in neonates", "correct": false}, {"label": "D", "text": "Requires anticoagulation", "correct": false}], "correct_answer": "A. Exchange of solutes takes place across peritoneal membrane", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Exchange of solutes takes place across peritoneal membrane Peritoneal dialysis is based on solute exchange and water transfer across the peritoneal membrane, unlike in hemodialysis where the exchange takes place across a synthetic hemodialysis membrane.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Exchange is driven by concentration gradient and high dextrose content of the dialysate Option: C. Easy accessibility makes it possible to be performed in neonates. It is often the initial renal replacement therapy of choice in sick and unstable infants. Option: D. Unlike haemodialysis, peritoneal dialysis does not require vascular access, and hence no anticoagulation is required.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 31 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 13 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 3-year-old child presents to the pediatric OPD with complaints of high-grade fever, sore throat, restlessness, and drooling of saliva. On examination, the child is sitting in a leaning forward position and is tachypneic. What will be seen in the laryngoscopy of this patient?", "options": [{"label": "A", "text": "Turban epiglottis", "correct": false}, {"label": "B", "text": "Cherry red epiglottis", "correct": true}, {"label": "C", "text": "Omega-shaped epiglottis", "correct": false}, {"label": "D", "text": "Mammillated appearance of the epiglottis", "correct": false}], "correct_answer": "B. Cherry red epiglottis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Cherry red epiglottis In the above case, the child presents with the complaint of high-grade fever , sore throat, restlessness, and drooling of saliva along with tachypnea and sitting in a tripod position which are signs and symptoms of epiglottitis. Hence the probable diagnosis is Epiglottitis. On laryngoscopy, swollen and cherry-red epiglottis is seen.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options:- Option: A. Seen in laryngeal tuberculosis Option: C. Seen in laryngomalacia Option: D. Mammillated appearance of vocal cords seen in laryngeal tuberculosis</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year unimmunized boy, Suresh came to the pediatric emergency with a complaint of high-grade fever and difficulty in swallowing. On examination, the child is tachypneic, suprasternal, and subcostal retraction present. The child is sitting in a eaning forward position. Necessary treatment is done. X-ray is most likely to reveal:", "options": [{"label": "A", "text": "A", "correct": true}, {"label": "B", "text": "B", "correct": false}, {"label": "C", "text": "C", "correct": false}, {"label": "D", "text": "D", "correct": false}], "correct_answer": "A. A", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884971052-QTDK057004IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>A The above case presentation is of Epiglottitis. The child presents with classical signs and symptoms of epiglottitis which are high-grade fever, difficulty in swallowing, tachypnea, and drooling of saliva. The child is sitting in a tripod position. The chest X-ray will show a thumb sign.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old child complains of high-grade fever, sore throat, breathlessness, and drooling of saliva. The child is sitting in a tripod position. What will be the immediate management of the probable diagnosis?", "options": [{"label": "A", "text": "Start iv antibiotics", "correct": false}, {"label": "B", "text": "Give nebulized epinephrine", "correct": false}, {"label": "C", "text": "Secure airway", "correct": true}, {"label": "D", "text": "Do a chest X-ray", "correct": false}], "correct_answer": "C. Secure airway", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Secure airway The above case presentation is of acute Epiglottitis. Management of acute epiglottitis includes: Stabilize the patient and secure the airway. Antibiotics need to be started. Continue for 10 days. No sedatives in acute respiratory distress.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "3-year-old RAM presents with the complaint of hoarseness of voice, barking cough, and stridor for 2 days. Earlier there was a history of cough and fever 2 months ago which resolved itself in 2 days. Chest X-ray done which will reveal?", "options": [{"label": "A", "text": "Ring sign", "correct": false}, {"label": "B", "text": "Donut sign", "correct": false}, {"label": "C", "text": "Steeple sign", "correct": true}, {"label": "D", "text": "Thumb sign", "correct": false}], "correct_answer": "C. Steeple sign", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Steeple sign The above case presentation is of Croup. The typical age of presentation is 3 months to 5 years. History of prodromal symptoms of Upper Respiratory Tract Infection-URTI for 2-3 days; the development of hoarseness of voice barking cough + stridor . X-Ray will show a steeple sign as shown below.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A full-term newborn infant is having episodes of cyanosis and apnea, which are worse when he is attempting to feed, but he seems better when he is crying. What could be the probable diagnosis?", "options": [{"label": "A", "text": "Congenital heart disease.", "correct": false}, {"label": "B", "text": "Tracheal agenesis", "correct": false}, {"label": "C", "text": "Tracheoesophageal fistula", "correct": false}, {"label": "D", "text": "Choanal atresia", "correct": true}], "correct_answer": "D. Choanal atresia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Choanal atresia The above case presentation is of choanal atresia. Patients present with the symptoms of respiratory distress and cyanosis which improves on crying . The screening test is an inability to pass feeding tube through the Intraoperative Cholangiogram (IOC) is high-resolution CT. Treatment is surgery.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You are posted in the neonatal care unit in the maternity ward. The mother complains that her baby turns blue while sleeping and seems better when crying. The most important next step to quickly establish the diagnosis is?", "options": [{"label": "A", "text": "Electrocardiogram (ECG)", "correct": false}, {"label": "B", "text": "Passing catheter to the nose.", "correct": true}, {"label": "C", "text": "Ventilation perfusion scan", "correct": false}, {"label": "D", "text": "Bronchoscopic evaluation of palate and larynx", "correct": false}], "correct_answer": "B. Passing catheter to the nose.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Passing catheter to the nose. The above case presentation is of choanal atresia . Patients present with the symptoms of respiratory distress and cyanosis which improves on crying. The screening test is an inability to pass feeding tube through the Intraoperative Cholangiogram(IOC) is high-resolution CT. Treatment is surgery.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old boy gets a high fever associated with difficulty in swallowing and stridor. The child is sitting and cannot sleep, drooling saliva, and X-ray shows a thumb sign. What will be your probable diagnosis?", "options": [{"label": "A", "text": "Acute pharyngitis", "correct": false}, {"label": "B", "text": "Acute laryngitis", "correct": false}, {"label": "C", "text": "Laryngo-tracheo-bronchitis", "correct": false}, {"label": "D", "text": "Acute epiglottitis", "correct": true}], "correct_answer": "D. Acute epiglottitis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Acute epiglottitis The above case scenario is of acute epiglottitis. The patient will present with signs and symptoms of high-grade fever, difficulty in swallowing, stridor, difficulty in breathing, and drooling saliva. The X-ray will show a thumb sign as shown below.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is not correct with respect to acute epiglottitis?", "options": [{"label": "A", "text": "Constant supervision in the hospital is mandatory", "correct": false}, {"label": "B", "text": "Dyspnea may be progressing and alarming", "correct": false}, {"label": "C", "text": "It is a special form of acute laryngitis, in which the inflammatory changes affect mainly the loosely attached mucosa of the epiglottitis", "correct": false}, {"label": "D", "text": "Systemic antibiotics are not a must to be started immediately", "correct": true}], "correct_answer": "D. Systemic antibiotics are not a must to be started immediately", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Systemic antibiotics are not a must to be started immediately IV antibiotics against H.influenza in high dose (amoxicillin + clavulanic acid) is a must to be started immediately.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The frontal neck radiograph shown in the picture below suggests which childhood respiratory disorder:", "options": [{"label": "A", "text": "Bronchiolitis", "correct": false}, {"label": "B", "text": "Epiglottitis", "correct": false}, {"label": "C", "text": "Croup", "correct": true}, {"label": "D", "text": "Laryngomalacia", "correct": false}], "correct_answer": "C. Croup", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884976062-QTDK057018IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Croup The frontal neck radiograph shows a “steeple sign” (subglottic tracheal narrowing) which is suggestive of croup.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of these childhood disorders present with wheezing except:", "options": [{"label": "A", "text": "Asthma", "correct": false}, {"label": "B", "text": "Bronchiolitis", "correct": false}, {"label": "C", "text": "Bronchitis", "correct": false}, {"label": "D", "text": "Croup", "correct": true}], "correct_answer": "D. Croup", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Croup Wheeze is associated with lower airway obstruction. Obstruction around the vocal cords (supraglottic or infraglottic obstructions), such as that in croup presents with stridor.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The commonest organism causing empyema in a 2-year child with pneumonia is:", "options": [{"label": "A", "text": "Moraxella", "correct": false}, {"label": "B", "text": "S.aureus", "correct": true}, {"label": "C", "text": "H.influenza", "correct": false}, {"label": "D", "text": "E.histolytica", "correct": false}], "correct_answer": "B. S.aureus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>S.aureus A large majority of pneumonia is caused by aureus and S. pneumonia, and the two are the most commonly implicated causes of empyema in children. Among S.aureus , both Methicillin -Susceptible Staphylococcus aureus MSSA and Methicillin -resistance Staphylococcus aureus MRSA is known to be associated with empyema.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Diagnosis of laryngomalacia is confirmed by:", "options": [{"label": "A", "text": "Clinical history and examination findings", "correct": false}, {"label": "B", "text": "Chest X-ray", "correct": false}, {"label": "C", "text": "Flexible laryngoscopy", "correct": true}, {"label": "D", "text": "Indirect laryngoscopy", "correct": false}], "correct_answer": "C. Flexible laryngoscopy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Flexible laryngoscopy Suspicion of laryngomalacia can be made in most children based on clinical history alone (stridor starting shortly after birth and increasing with crying and feeding). However, confirmation of the diagnosis is usually made by flexible laryngoscopy in an awake infant with evidence of the collapse of the supraglottic part of the larynx. There is prolapse of posteriorly positioned arytenoid cartilages into the airway during inspiration, shortening of the aryepiglottic folds, and a typical “omega-shaped” epiglottis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Seal barking cough is associated with:", "options": [{"label": "A", "text": "Laryngitis", "correct": false}, {"label": "B", "text": "Tracheitis", "correct": false}, {"label": "C", "text": "Choanal atresia", "correct": false}, {"label": "D", "text": "Croup (laryngotracheobronchitis)", "correct": true}], "correct_answer": "D. Croup (laryngotracheobronchitis)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Croup (laryngotracheobronchitis) Croup, most commonly a term used for laryngotracheobronchitis, is a common respiratory disorder in children characterized by stridor of varying severity , seal barking cough, and hoarse voice.</p>\n<p><strong>Highyeild:</strong></p><p>Treatment of this disorder is usually guided by the s everity of stridor in children. Children with mild stridor (absent cyanosis, O2 &gt; 92%, stridor only on coughing and not at rest) are best managed symptomatically; children with moderate stridor (irritable, tachypnea, chest retractions, O2 &gt; 92%, stridor at rest) are managed with epinephrine nebulization; and those with severe stridor (restless, altered sensorium, significant tachypnea, and chest retractions, O2&lt; 92%, stridor at rest) are managed with corticosteroid (single dose IM dexamethasone injection), with subsequent management using corticosteroids/epinephrine.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 23 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 11 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "All of the following syndromes are associated with ASD EXCEPT:", "options": [{"label": "A", "text": "Fetal alcohol syndrome.", "correct": false}, {"label": "B", "text": "Down syndrome", "correct": false}, {"label": "C", "text": "Holt Oram syndrome", "correct": false}, {"label": "D", "text": "Patau syndrome.", "correct": true}], "correct_answer": "D. Patau syndrome.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Patau syndrome. Syndrome associated with ASD. Pierre-Robin syndrome TAR (Thrombocytopenia absent radius) syndrome Fetal alcohol syndrome Ellis-Van Crevald syndrome Holt-Oram syndrome Ehler-Danlos syndrome Rubinstein-Taybi syndrome</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Identify the congenital heart disease associated with the child given in the image", "options": [{"label": "A", "text": "Ventricular septal defect (VSD)", "correct": false}, {"label": "B", "text": "Atrial septal defect (ASD)", "correct": true}, {"label": "C", "text": "Transposition of the great arteries (TGA)", "correct": false}, {"label": "D", "text": "Patent ductus arteriosus (PDA)", "correct": false}], "correct_answer": "B. Atrial septal defect (ASD)", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883766812-QTDK026002IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Atrial septal defect (ASD) The image shows congenital micrognathia and retrognathia, which is seen in Pierre Robin syndrome associated with Autism spectrum disorder. Common syndromes associated with congenital heart disease Syndrome Associated congenital heart lesions Alagille syndrome Peripheral pulmonary artery stenosis with or without a complex CV abnormalities CHARGE Association TOF, Truncus arteriosus, aortic arch anomalies Down's syndrome ECD, VSD Ehlers Danlos syndrome ASD, aneurysm of the aorta, and carotids Fetal alcohol syndrome VSD, PDA, ASD, TOF Holt Oram syndrome ASD, VSD Rubinstein Taybi syndrome PDA, VSD, ASD Williams syndrome Supravalvular AS, PA stenosis</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Following are statements about the ventricular septal defect. Identify the wrong statement.", "options": [{"label": "A", "text": "Most common congenital and a cyanotic heart disease is VSD", "correct": false}, {"label": "B", "text": "Most common congenital heart disease affected by infective endocarditis.", "correct": false}, {"label": "C", "text": "Muscular VSD more common than membranous VSD", "correct": true}, {"label": "D", "text": "Pansystolic murmur results due to left to right shunt across the ventricular septum and is best heard at the left sterna border", "correct": false}], "correct_answer": "C. Muscular VSD more common than membranous VSD", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Muscular VSD more common than membranous VSD Membranous VSD is more common than muscular membranous Ventricular Septal Defect(VSD). Blood moves from left to right with a gush - resulting in a pansystolic murmur Most common congenital heart disease is affected by infective endocarditis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child with Ventricular Septal Defect develops the following findings. There is no history of fever. What is the probable cause of these findings", "options": [{"label": "A", "text": "Infective endocarditis", "correct": false}, {"label": "B", "text": "Eissenmenger syndrome", "correct": true}, {"label": "C", "text": "Cyanotic spell", "correct": false}, {"label": "D", "text": "Congestive heart failure", "correct": false}], "correct_answer": "B. Eissenmenger syndrome", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883767362-QTDK026004IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Eissenmenger syndrome Clubbing and cyanosis with no history of fever suggest Eissenmenger syndrome. It is a reversal of the flow of blood at the level of the shunt of Ventricular Septal Defect VSD, Autism spectrum disorder, and also from the pulmonary artery to the aorta resulting in right-to-left shunt. The decreased oxygen saturation causes cyanosis mainly in the lower limbs because mixing of blood mainly affects descending aorta which supply oxygenated blood to lower limbs mainly. Eissenmenger syndrome consists of pulmonary arteria l hypertension with a Ventricular Septal Defect VSD with a right to left shunt.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The mother of a 6-month-old infant brings her child to the clinic following complaints of excessive crying followed by bluish discoloration of the skin. She adds that such episodes happen 2-3 times per day. A chest X-ray was done and showed the following: What is the most likely diagnosis?", "options": [{"label": "A", "text": "Tricuspid atresia", "correct": false}, {"label": "B", "text": "Ebstein anomaly", "correct": false}, {"label": "C", "text": "Transposition of great vessels", "correct": false}, {"label": "D", "text": "Tetralogy of Fallot", "correct": true}], "correct_answer": "D. Tetralogy of Fallot", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883767637-QTDK026006IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Tetralogy of Fallot The chest x-ray shows an upturned apex suggestive of right ventricular hypertrophy. This shape of a heart is typically seen in TOF and is known as Coeur en Sabot or a boot-shaped heart.</p>\n<p><strong>Highyeild:</strong></p><p>The history of multiple cyanotic spells clubbed with X-ray imaging point towards a diagnosis of Tetralogy of Fallot. It is a cyanotic congenital heart disease characterized by a ventricular septal defect (VSD), pulmonary stenosis, a misplaced aorta, and right ventricular hypertrophy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Tricuspid atresia: Congenital absence of the tricuspid valve. The right ventricle is hypoplastic . X-ray of tricuspid atresia can show Box-shaped Option: B. Ebstein anomaly: septal and posterior leaflets of the tricuspid valve are displaced towards the apex of the heart's right ventricle. X-ray of Ebsteins Anomaly can show a Box-shaped This condition is associated with Maternal antenatal lithium exposure. Option: C. Transposition of great vessels: Aorta arises from the right ventricle and the pulmonary artery from the left ventricle. On X-ray, this condition shows an egg on the side appearance.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant with multiple cyanotic spells had one seizure episode in the morning. On examination, the baby is cyanosed, with a prominent \"a\" wave in the jugular venous pulse. ECG shows right axis deviation. On auscultation, a systolic ejection murmur is heard in the left second intercostal area. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Tetralogy of Fallot", "correct": true}, {"label": "B", "text": "Tricuspid atresia", "correct": false}, {"label": "C", "text": "Transposition of great vessels", "correct": false}, {"label": "D", "text": "Ebstein anomaly", "correct": false}], "correct_answer": "A. Tetralogy of Fallot", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Tetralogy of Fallot The history of multiple cyanotic spells, large “a” wave in JVP, and ejection systolic murmur in the pulmonary area point towards a diagnosis of Tetralogy of Fallot.</p>\n<p><strong>Highyeild:</strong></p><p>It is a cyanotic congenital heart disease characterized by a ventricular septal defect (VSD), pulmonary stenosis, a misplaced aorta, and right ventricular hypertrophy. As the systolic pressure between the two right and left ventricles are identical, there is a silent VSD. The severity of cyanosis is directly proportional , and the intensity of the ejection systolic murmur is inversely proportional to the severity of pulmonic stenosis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Tricuspid atresia: Congenital absence of the tricuspid valve. The right ventricle is hypoplastic. This also causes a large “a” wave in JVP, but ECG shows left axis deviation. X-ray of tricuspid atresia can show a Box-shaped heart. Option: C. Transposition of great vessels: Aorta arises from the right ventricle and the pulmonary artery from the left ventricle. On X-ray, this condition shows an egg on the side appearance. Option: D. Ebstein anomaly: septal and posterior leaflets of the tricuspid valve are displaced towards the apex of the heart's right ventricle. JVP shows a large “V” wave as displaced tricuspid valves cause regurgitation of blood from the right ventricle into the right atrium. X-ray of Ebsteins Anomaly can show a Box-shaped This condition is associated with Maternal antenatal lithium exposure.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8 months old infant is brought to the OPD with complaints of bluish discoloration of the skin and excessive crying. On examination, a prominent “a” wave is seen in JVP. ECG shows left axis deviation. Echocardiography findings resemble the following anatomy of the heart: What is the likely diagnosis?", "options": [{"label": "A", "text": "Tetralogy of Fallot", "correct": false}, {"label": "B", "text": "Tricuspid atresia", "correct": true}, {"label": "C", "text": "Transposition of great vessels", "correct": false}, {"label": "D", "text": "Ebstein anomaly", "correct": false}], "correct_answer": "B. Tricuspid atresia", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883767966-QTDK026009IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Tricuspid atresia The anatomy shows absence of the tricuspid valve, hypoplastic right ventricle.</p>\n<p><strong>Highyeild:</strong></p><p>Systemic venous blood reaches the RA and onto the LA through the ASD. Mixing of oxygenated and deoxygenated blood takes place in LA, which reaches the LV. A muscular VSD is the only route through which blood reaches RV, which further goes into the pulmonary trunk. X-ray shows Box-shaped heart.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Tetralogy of Fallot: It is a cyanotic congenital heart disease characterized by ventricular septal defect (VSD), pulmonary stenosis, a misplaced aorta and right ventricular hypertrophy. X ray shows Boot shaped heart. Option: C. Transposition of great vessels: Aorta arises from the right ventricle and pulmonary artery from the left ventricle. X ray shows egg on side appearance. Option: D. Ebstein anomaly: septal and posterior leaflets of the tricuspid valve are displaced towards the apex of the right ventricle of the heart.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2 year old child is brought to the clinic with history of bluish discoloration of skin, easy fatigability. Examination shows tachycardia, clubbing, and prominent “v” wave in JVP. A chest Xray was ordered and is shown below: What is the most likely diagnosis?", "options": [{"label": "A", "text": "Tricuspid atresia", "correct": false}, {"label": "B", "text": "Ebstein anomaly", "correct": true}, {"label": "C", "text": "Transposition of great vessels", "correct": false}, {"label": "D", "text": "Tetralogy of Fallot", "correct": false}], "correct_answer": "B. Ebstein anomaly", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883768280-QTDK026010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ebstein anomaly Chest Xray shows box shaped heart. Note the cardiac enlargement due to right atrial and right ventricular enlargement.</p>\n<p><strong>Highyeild:</strong></p><p>Ebstein anomaly is a rare cyanotic CHD characterised by displacement of septal and posterior leaflets of the tricuspid valve towards the apex of the right ventricle of the heart leading to atrialization of the right ventricle. It is associated with a ntenatal Maternal Lithium exposure and it can also show Box shaped Heart on Chest X ray.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Tricuspid atresia: Congenital absence of the tricuspid valve. The right ventricle is hypoplastic. This also causes large “a” wave in JVP but ECG shows left axis deviation. Option: C. Transposition of great vessels: Aorta arises from the right ventricle and pulmonary artery from the left ventricle. Egg-on-a-string sign, also referred to as egg on its side, refers to the cardiomediastinal silhouett e seen in transposition of the great arteries (TGA). The heart appears globular due to an abnormal convexity of the right atrial border and left atrial enlargement and therefore appears like an egg. Option: D. Tetralogy of Fallot: It is a cyanotic congenital heart disease characterized by ventricular septal defect (VSD), pulmonary stenosis, a misplaced aorta and right ventricular hypertrophy. Chest Xray shows upturned apex giving it an appearance of boot shaped heart.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2 weeks old infant is brought to the OPD with bluish discoloration of skin. Auscultation of precordium shows significant ejection systolic murmur and apical third sound gallop. Chest X ray was ordered and showed narrow pedicle of the heart as shown below: What is the most likely diagnosis?", "options": [{"label": "A", "text": "Tetralogy of Fallot", "correct": false}, {"label": "B", "text": "Ebstein anomaly", "correct": false}, {"label": "C", "text": "Transposition of great vessels", "correct": true}, {"label": "D", "text": "Total anomalous pulmonary venous connection", "correct": false}], "correct_answer": "C. Transposition of great vessels", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1690962901995-QTDK026012IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Transposition of great vessels The history and Chest Xray point towards the diagnosis of Transposition of great vessels.</p>\n<p><strong>Highyeild:</strong></p><p>It shows cardiomegaly with narrow base, narrow mediastinum and plethoric lung fields. Narrow mediastinum is due overlapping of aorta and pulmonary artery when seen in AP/PA view. This gives characteristic “Egg-on-side or Egg-on-string” appearance.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Tetralogy of Fallot: It is a cyanotic congenital heart disease characterized by ventricular septal defec t (VSD), pulmonary stenosis, a misplaced aorta and right ventricular hypertrophy. Chest Xray shows upturned apex giving it an appearance of boot shaped heart. Option: B. Ebstein anomaly is a rare cyanotic CHD characterised by displacement of septal and posterior leaflets of the tricuspid valve towards the apex of the right ventricle of the heart leading to atrialization of the right ventricle. Chest Xray shows box shaped heart (cardiac enlargement due to right atrial and right ventricular enlargement) Option: D. TAPVC: pulmonary veins instead of joining the left atrium, are connected anomalously to right atrium. Chest Xray shows cardiomegaly with characteristic pattern of “snowman or figure of 8” configuration. Infracardiac TAPVC has the worst prognosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A just born neonate with severe bluish discoloration is transported to NICU for further management. Antenatal history reveals that the mother is diabetic. Echocardiography showed recirculation of oxygenated pulmonary venous blood in the lungs and recirculation of systemic venous blood in the systemic circulation. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Tetralogy of Fallot", "correct": false}, {"label": "B", "text": "Ebstein anomaly", "correct": false}, {"label": "C", "text": "Transposition of great vessels", "correct": true}, {"label": "D", "text": "Total anomalous pulmonary venous connection", "correct": false}], "correct_answer": "C. Transposition of great vessels", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Transposition of great vessels TGA: Aorta arises from the right ventricle and pulmonary artery from the left ventricle.</p>\n<p><strong>Highyeild:</strong></p><p>This creates separation in systemic and pulmonary circulation and survival depends only on mixing of blood in inter-atrial, inter-ventricular or aortopulmonary communications. Infants of diabetic mother have increased risk of transposition of great vessels. X ray of TGA shows egg on side or egg on string appearance.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Tetralogy of Fallot: It is a cyanotic congenital heart disease characterized by ventricular septal defect (VSD), pulmonary stenosis, a misplaced aorta and right ventricular hypertrophy. Chest X ray shows Boot shaped Heart. Option: B. Ebstein anomaly is a rare cyanotic CHD characterised by displacement of septal and posterior leaflets of the tricuspid valve towards the apex of the right ventricle of the heart leading to atrialization of the right ventricle. Option: D. TAPVC: Pulmonary veins instead of joining the left atrium, are connected anomalously to right atrium. Chest X-ray shows Figure of 8 or Snowman appearance.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2 year old girl is brought to the hospital with complains of bluish discoloration and swelling of lower limbs. On auscultation, patient has tricuspid flow murmur, pulmonary ejection systolic murmur. Chest Xray showed the following finding: What is the most likely diagnosis?", "options": [{"label": "A", "text": "Tetralogy of Fallot", "correct": false}, {"label": "B", "text": "Ebstein anomaly", "correct": false}, {"label": "C", "text": "Transposition of great vessels", "correct": false}, {"label": "D", "text": "Total anomalous pulmonary venous connection", "correct": true}], "correct_answer": "D. Total anomalous pulmonary venous connection", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883768522-QTDK026015IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Total anomalous pulmonary venous connection Patient presents with cyanosis and signs of heart failure which gives clue to a cyanotic heart disease in failure.</p>\n<p><strong>Highyeild:</strong></p><p>Chest Xray shows characteristic “snowman of figure of 8” appearance which is seen only after 2 years of age. Supracardiac TAPVC has the best prognosis and Infracardiac TAPVC has the worst prognosis because of more Severe obstruction.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Tetralogy of Fallot: It is a cyanotic congenital heart disease characterized by ventricular septal defect (VSD), pulmonary stenosis, a misplaced aorta and right ventricular hypertrophy. Chest Xray shows upturned apex giving it an appearance of boot shaped heart. Option: B. Ebstein anomaly is a rare cyanotic CHD characterised by displacement of septal and posterior leaflets of the tricuspid valve towards the apex of the right ventricle of the heart leading to atrialization of the right ventricle. Chest Xray shows box shaped heart (cardiac enlargement due to right atrial and right ventricular enlargement). Option: C. Transposition of great vessels: It shows cardiomegaly with narrow base, narrow mediastinum and plethoric lung fields. Narrow mediastinum is due overlapping of aorta and pulmonary artery when seen in AP/PA This gives characteristic “Egg-on-side or Egg-on-string” appearance.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 21 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 31 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A defect in a gene that makes the protein cystic fibrosis transmembrane regulator is the cause of CF. According to recent research, this problem causes an imbalance of which key substance in the body?", "options": [{"label": "A", "text": "HORMONES", "correct": false}, {"label": "B", "text": "GLUCOSE", "correct": false}, {"label": "C", "text": "CARBOHYDRATES", "correct": false}, {"label": "D", "text": "FATTY ACIDS", "correct": true}], "correct_answer": "D. FATTY ACIDS", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>FATTY ACIDS Fatty acids are long molecules that serve as the building blocks of the cell membrane. Certain fatty acids play a key role in controlling the body’s inflammatory response. The hallmark of CF is a chronic inflammation of the lung tissue. People with CF appear to have high levels of fatty acid arachidonic acid and low levels of DHA. This combination leads to tissue inflammation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "CF is an inherited disease. How is CF passed down through families?", "options": [{"label": "A", "text": "One parent is a carrier of the CF gene", "correct": false}, {"label": "B", "text": "One grandparent is a carrier of the CF gene", "correct": false}, {"label": "C", "text": "Both parents are the carrier of the gene", "correct": true}, {"label": "D", "text": "All of the above", "correct": false}], "correct_answer": "C. Both parents are the carrier of the gene", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Both parents are the carrier of the gene To have CF, a person must inherit 2 defective CF genes, 1 from each parent who carries the abnormal CF gene. Each time 2 carriers conceive, they have a 1 in a 4 chance that their child will have CF. They also have a 1 in 2 chance that the child will be a carrier of the CF gene. And they have a 1 in 4 chance that the child will not be a carrier.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You’re providing care to a 16-year-old male who has cystic fibrosis. Select all the possible complications this patient can experience due to cystic fibrosis: BLOOD GLUCOSE 255 mg/dl Hearing disturbances Hemoptysis Greasy, foul-smelling stools Weight gain Meconium ileus Thick respiratory sections Dyspnea Coughing Hyperoxemia Infertility Select the correct answer from given below code:", "options": [{"label": "A", "text": "1, 2, 4, 7, 9, and 11", "correct": false}, {"label": "B", "text": "1, 3, 4, 7, 9, and 11", "correct": true}, {"label": "C", "text": "1, 5, 6, 7, 9, and 10", "correct": false}, {"label": "D", "text": "1, 5, 4, 7, 9, and 10", "correct": false}], "correct_answer": "B. 1, 3, 4, 7, 9, and 11", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1, 3, 4, 7, 9, and 11 Blood glucose increase, hemoptysis, greasy, foul-smelling stools, excessive mucus production, dyspnea, coughing, and infertility these all are complications of cystic fibrosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "About 1 hour after eating a meal, your patient, who has cystic fibrosis, starts to experience abdominal pain and bloating. Then 2 hours later the patient has a bowel movement. The patient’s stool appears to be greasy and has a foul odor. Which medication below that is being taken by the patient is not providing a desirable outcome for this patient and needs to be re-addressed by the physician?", "options": [{"label": "A", "text": "GUAIFENESIN", "correct": false}, {"label": "B", "text": "TRIAMCINOLONE", "correct": false}, {"label": "C", "text": "Pancreatic lipase", "correct": true}, {"label": "D", "text": "POLYETHYLENE GLYCOL", "correct": false}], "correct_answer": "C. Pancreatic lipase", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pancreatic lipase Patients with CF need pancreatic enzymes because these enzymes that would normally leave the pancreas can't because of thick mucus. Therefore, they must take a supplementation form of them. The pancreatic enzymes (protease, amylase, and lipase) help digest protein, fats, etc. If a patient does not have enough present in the body to aid in digestion, they will start to have abdominal bloating/pain, greasy/foul-smelling stools along with weight loss, and vitamin deficiency. The only pancreatic enzyme listed is Pancrelipase. Therefore, the MD needs to re-address the pancreatic enzyme supplementation because the patient is still having issues with digesting these important substances.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The physician orders chest physiotherapy for your patient with cystic fibrosis. This is best performed:", "options": [{"label": "A", "text": "Immediately after a meal", "correct": false}, {"label": "B", "text": "Right before a meal", "correct": false}, {"label": "C", "text": "1-2 hours after a meal", "correct": true}, {"label": "D", "text": "Only at bedtime", "correct": false}], "correct_answer": "C. 1-2 hours after a meal", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1-2 hours after a meal It is best to perform Current Procedural Terminology (CPT) 1-2 hours after a meal (in between meals). You wouldn't want to do it immediately after a meal due to aspiration or vomiting risk OR right before because this can alter a patient's appetite due to the mucous that will be expelled (the mucous can have a foul taste or odour to it), and option D is wrong because CPT is done up to 2-4 times a day NOT only at bedtime.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-year-old client with cystic fibrosis is admitted to the hospital and will undergo a chest physiotherapy treatment. The therapy should be properly coordinated by the doctor with the respiratory therapy department so that treatments occur during:", "options": [{"label": "A", "text": "After meals", "correct": false}, {"label": "B", "text": "Between meals", "correct": true}, {"label": "C", "text": "After medication", "correct": false}, {"label": "D", "text": "Around the child’s play schedule", "correct": false}], "correct_answer": "B. Between meals", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Between meals Chest physiotherapy treatments are scheduled between meals to prevent aspiration of stomach contents because the child is placed in a variety of positions during the treatment process.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child with cystic fibrosis is being treated with inhalation therapy with dornase alfa. A side effect of the medication is:", "options": [{"label": "A", "text": "Weight gain", "correct": false}, {"label": "B", "text": "Hair loss", "correct": false}, {"label": "C", "text": "Sore throat", "correct": true}, {"label": "D", "text": "Brittle nails", "correct": false}], "correct_answer": "C. Sore throat", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Sore throat The side effect of dornase alfa include: Sore throat Hoarseness Laryngitis</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The mother of a child with cystic fibrosis tells the doctor that her child makes a snoring sound when breathing. The doctor is aware that many children with cystic fibrosis have:", "options": [{"label": "A", "text": "Choanal atresia", "correct": false}, {"label": "B", "text": "Nasal polyps", "correct": true}, {"label": "C", "text": "Septal deviations", "correct": false}, {"label": "D", "text": "Enlarged adenoids", "correct": false}], "correct_answer": "B. Nasal polyps", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nasal polyps Children with cystic fibrosis are susceptible to chronic sinusitis and nasal polyps, which might require surgical removal. Answer A is incorrect because it is a congenital condition in which there is a bony obstruction between the nares and the pharynx. Answers C and D are not specific to the child with cystic fibrosis; therefore, they are incorrect.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child who has recently been diagnosed with cystic fibrosis is in a pediatric clinic. Which metabolic disorder is associated with this disease? Hypochloremia Hyperchloremia Hyperkalemia Hypokalemia Metabolic alkalosis Metabolic acidosis Select the correct answer from given below code:", "options": [{"label": "A", "text": "1, 4, and 5", "correct": true}, {"label": "B", "text": "1, 3, and 5", "correct": false}, {"label": "C", "text": "2, 4, and 6", "correct": false}, {"label": "D", "text": "1, 3, and 6", "correct": false}], "correct_answer": "A. 1, 4, and 5", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1, 4, and 5 The metabolic disorder associated with c ystic fibrosis is hypochloremic hypokalemic metabolic alkalosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old child came with a history of recurrent chest infections, a productive cough for a few months, persistent nasal blockage, and earache for 2 weeks. A chest X-ray was done and shown below. What will be the probable diagnosis?", "options": [{"label": "A", "text": "Cystic fibrosis", "correct": false}, {"label": "B", "text": "Kartagener syndrome", "correct": true}, {"label": "C", "text": "Young syndrome", "correct": false}, {"label": "D", "text": "Bronchitis", "correct": false}], "correct_answer": "B. Kartagener syndrome", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682885005376-QTDK058013IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Kartagener syndrome Also called immotile cilia syndrome Autosomal recessive disorder Autosomal recessive disorder Recurrent chest infections, year-long productive cough, bronchiectasis, persistent nasal blockage, otitis media Right left laterality defect Dextrocardia Newborns can present with hydrocephalus</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In the above question, what will be the mode of inheritance:", "options": [{"label": "A", "text": "A.", "correct": true}, {"label": "B", "text": "B.", "correct": false}, {"label": "C", "text": "C.", "correct": false}, {"label": "D", "text": "D.", "correct": false}], "correct_answer": "A. A.", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682885005547-QTDK058014IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>A. Also called immotile cilia syndrome Autosomal recessive disorder A recurrent chest infections, year-long productive cough, bronchiectasis, persistent nasal blockage, otitis media Right left laterality defect Dextrocardia Newborns can present with hydrocephalus</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-month-old baby in the month of December came to the pediatric OPD with the complaint of low-grade fever, cough with sputum, some breathing difficulty, and chest pain for 4 days. On examination, HR-124, RR- 56, oxygen saturation of 92% on room air. Chest X-ray shows perihilar and peribronchial infiltrates seen. No clinical signs of consolidation were seen. What is the most common virus causing pneumonia in children?", "options": [{"label": "A", "text": "Respiratory syncytial virus", "correct": true}, {"label": "B", "text": "Influenza virus", "correct": false}, {"label": "C", "text": "Parainfluenza virus", "correct": false}, {"label": "D", "text": "Adenovirus", "correct": false}], "correct_answer": "A. Respiratory syncytial virus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Respiratory syncytial virus The above case is of viral The respiratory syncytial virus is the most common cause of viral pneumonia under 6 months of age. At other ages, parainfluenza, influenza, and adenovirus are commonly present with extensive interstitial pneumonia. Clinical signs of consolidation are absent. Radiological signs consist of perihilar and peribronchial infiltrates.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old child came in with the complaint of malaise, headache, fever, sore throat, and cough. On examination, diffuse crepitations are heard in the lower lobe. Chest X-ray was done and given below. How will you manage the patient?", "options": [{"label": "A", "text": "Amoxicillin", "correct": false}, {"label": "B", "text": "Azithromycin", "correct": true}, {"label": "C", "text": "Cefotaxime", "correct": false}, {"label": "D", "text": "Ceftriaxone", "correct": false}], "correct_answer": "B. Azithromycin", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682885006056-QTDK058017IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Azithromycin The above case scenario is of atypical pneumonia . The most common organism causing atypical pneumonia is Mycoplasma pneumoniae. Initial symptoms are malaise, headache, fever, sore throat, myalgia, and cough. Dyspnea is unusual. X-ray findings are more extensive than physical findings. Infiltrates involve one lobe, usually the lower. Poorly defined hazy or fluffy exudates radiate from the hilar regions, occasionally with enlarged hilar lymph nodes and pleural effusion. Patients treated with macrolide antibiotics for example azithromycin, erythromycin, and clarithromycin or tetracycline for 7- 10 days.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Recurrent pneumonia is classified as:", "options": [{"label": "A", "text": "More than or equal to 2 episodes in 1 year or more than equal to 3 episodes with radiological clearing in between.", "correct": true}, {"label": "B", "text": "More than or equal to 1 episode in 1 year or more than equal to 2 episodes with radiological clearing in between.", "correct": false}, {"label": "C", "text": "More than or equal to 2 episodes in 1 year without radiological clearing in between.", "correct": false}, {"label": "D", "text": "More than or equal to 3 episodes without radiological clearing in between.", "correct": false}], "correct_answer": "A. More than or equal to 2 episodes in 1 year or more than equal to 3 episodes with radiological clearing in between.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>More than or equal to 2 episodes in 1 year or more than equal to 3 episodes with radiological clearing in between. Recurrent pneumonia is classified as more than or equal to 2 episodes in 1 year or more than equal to 3 episodes with radiological clearing in between.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You are an intern posted in a pediatric ward and your senior asks you to calculate the respiratory rate of a 6-month-old child. When will you say that the child is tachypneic?", "options": [{"label": "A", "text": "More than 60", "correct": false}, {"label": "B", "text": "More than 50", "correct": true}, {"label": "C", "text": "More than 40", "correct": false}, {"label": "D", "text": "More than 30", "correct": false}], "correct_answer": "B. More than 50", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>More than 50 Less than 2 months – 60 2 month to 12 months – 50 1 year to 5 years – 40</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old child came with a complaint of cough and sore throat within 3 days. On examination, there is no breathing difficulty, and no chest indrawing. Child is active and taking feeds. What will be the next line of management?", "options": [{"label": "A", "text": "Home care, a cough remedy, PCM if fever, follow up after 5 days.", "correct": true}, {"label": "B", "text": "Home care, oral amoxicillin, follow up after 5 days.", "correct": false}, {"label": "C", "text": "Home care, oral amoxicillin, follow up after 2 days.", "correct": false}, {"label": "D", "text": "IV ampicillin and gentamicin, refer immediately to higher centre", "correct": false}], "correct_answer": "A. Home care, a cough remedy, PCM if fever, follow up after 5 days.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Home care, a cough remedy, PCM if fever, follow up after 5 days. The above case scenario is of NO PNEUMONIA. Since there is no breathing difficulty or chest indrawing and the child is active and taking feeds so no pneumonia. Hence the treatment is home care, a cough remedy, PCM if fever, follow-up after 5 days. Category Essential features Treatment category Cough or cold No fast breathing; no indicators of severe pneumonia Home care, home remedy for cough; paracetamol for fever Pneumonia with or without lower chest indrawing Fast breathing: 2-12 months: 250/minute; 1-5 years 240/minute Lower chest indrawing, normal saturation Home care, oral amoxicillin Severe pneumonia Lower chest indrawing; unable to drink or breastfeed, convulsions, lethargy, unconsciousness, severe respiratory distress, central cyanosis Inpatient care IM, IV benzylpenicillin or ampicillin and gentamicin</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-year-old child came in complaining of high-grade fever with chills, cough with sputum, and breathing difficulty. On examination, diminished air entry and crepitations were heard. Chest X-ray was done and shown below. What is the likely organism causing the disease?", "options": [{"label": "A", "text": "S. pneumoniae", "correct": true}, {"label": "B", "text": "S. aureus", "correct": false}, {"label": "C", "text": "Mycoplasma", "correct": false}, {"label": "D", "text": "H. influenzae", "correct": false}], "correct_answer": "A. S. pneumoniae", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682885006106-QTDK058022IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>S. pneumoniae The above case scenario is pneumonia . The most likely organism causing pneumonia is pneumoniae. Others are S.aureus , mycoplasma , H.influenzae, etc.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You are an intern posted in the pediatric department and your senior asks you to auscultate the chest of a pneumonia patient. What will you expect to hear over the areas of consolidation?", "options": [{"label": "A", "text": "Bronchial sound", "correct": true}, {"label": "B", "text": "Tubular sound", "correct": false}, {"label": "C", "text": "Vesicular sound", "correct": false}, {"label": "D", "text": "Absent sound", "correct": false}], "correct_answer": "A. Bronchial sound", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Bronchial sound The above case is pneumonia. On auscultation of pneumonia,the patient’s bronchial sound is heard over the areas of consolidation</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-year-old female presents with non-productive cough and fever of three days duration. You hear crackles on auscultation of the right middle lobe area and diagnose lobar pneumonia. She is otherwise well appearing. What antimicrobial therapy is appropriate for the empiric treatment of this infection?", "options": [{"label": "A", "text": "Ceftriaxone", "correct": false}, {"label": "B", "text": "Amoxicillin", "correct": true}, {"label": "C", "text": "Azithromycin", "correct": false}, {"label": "D", "text": "Levofloxacin", "correct": false}], "correct_answer": "B. Amoxicillin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Amoxicillin The above case scenario is of lobar pneumonia . The empirical treatment for lobar pneumonia is 2nd line options with patients with penicillin allergy include cephalosporins, clindamycin, macrolides, and levofloxacin.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In the above question, your patient has been on the 1st line antimicrobial therapy for &gt; 72 hours and is still febrile with no significant improvement in her cough. She now reports mild intermittent shortness of breath with activity but no other new symptoms. What are possible reasons for presumed treatment failure?", "options": [{"label": "A", "text": "Ineffective antibiotic coverage", "correct": false}, {"label": "B", "text": "Pneumonia complications", "correct": false}, {"label": "C", "text": "Foreign body aspiration", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above The above case scenario is pneumonia. The possible reasons for presumed treatment failure are: Ineffective antibiotic coverage Pneumonia complications- pleural effusion or empyema Alternative or coincidental diagnosis e.g. foreign body aspiration</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "If available, a chest X-ray should be done for children with possible pneumonia.", "options": [{"label": "A", "text": "When a diagnosis is made", "correct": false}, {"label": "B", "text": "When a history of tachypnea is present", "correct": true}, {"label": "C", "text": "When antibiotics are started", "correct": false}, {"label": "D", "text": "When complications are suspected", "correct": false}], "correct_answer": "B. When a history of tachypnea is present", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>When a history of tachypnea is present If available, a chest X-ray should be done for children with possible pneumonia when a history of tachypnea is present.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following immunizations effectively reduce pneumonia mortality in children?", "options": [{"label": "A", "text": "Haemophilus influenzae b vaccine", "correct": false}, {"label": "B", "text": "Pneumococcal conjugate vaccine", "correct": false}, {"label": "C", "text": "Measles vaccine", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above To effectively reduce pneumonia mortality in children following immunisation are required: Haemophilus influenzae b vaccine Pneumococcal conjugate vaccine Measles vaccine</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old child presents to a pediatric emergency with the complaint of sudden onset breathing difficulty, cough, and wheeze. On examination, hyper resonant notes present, diminished vocal resonance, and poor air entry. Further, his father told that the child was playing with his toys at the time symptoms started. X-ray was done and shown below. Which of the following instruments will be used to remove it?", "options": [{"label": "A", "text": "Rigid bronchoscope", "correct": true}, {"label": "B", "text": "Flexible bronchoscope", "correct": false}, {"label": "C", "text": "Rigid laryngoscope", "correct": false}, {"label": "D", "text": "Flexible laryngoscope", "correct": false}], "correct_answer": "A. Rigid bronchoscope", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682885006196-QTDK058030IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rigid bronchoscope The above case scenario is of foreign body aspiration. The instrument used for the removal is a rigid bronchoscope.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old child came to Primary Health Care (PHC) with high-grade fever, cough, and sore throat for 2 days. The child is conscious, though irritable, RR-56/min HR- 120/min with chest retractions. The child is able to drink. What will be the next line of management?", "options": [{"label": "A", "text": "Refer to higher centres after giving IV ampicillin.", "correct": false}, {"label": "B", "text": "Oral ampicillin and cough management with nebulization and follow-up after 2 days.", "correct": true}, {"label": "C", "text": "Oral ampicillin and cough management with nebulization and follow-up after 5 days.", "correct": false}, {"label": "D", "text": "IV + gentamicin, gentamycin, nebulization, and prepare for intubation.", "correct": false}], "correct_answer": "B. Oral ampicillin and cough management with nebulization and follow-up after 2 days.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Oral ampicillin and cough management with nebulization and follow-up after 2 days. The above case scenario is pneumonia. The next line of management is oral ampicillin and cough management with nebulization and follow-up after 2 days. Category Essential features Treatment category Cough or cold No fast breathing; no indicators of severe pneumonia Home care, home remedy for cough; paracetamol for fever Pneumonia with or without lower chest indrawing Fast breathing: 2-12 months: 250/minute; 1-5 years 240/minute Lower chest indrawing, normal saturation Home care, oral amoxicillin Severe pneumonia Lower chest indrawing; unable to drink or breastfeed, convulsions, lethargy, unconsciousness, severe respiratory distress, central cyanosis Inpatient care IM, IV benzylpenicillin or ampicillin and gentamicin</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following antiviral agents have been used in the treatment of bronchiolitis?", "options": [{"label": "A", "text": "Amantadine", "correct": false}, {"label": "B", "text": "Rimantadine", "correct": false}, {"label": "C", "text": "Ribavirin", "correct": true}, {"label": "D", "text": "Enfuvirtide", "correct": false}], "correct_answer": "C. Ribavirin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ribavirin Ribavirin is the only antiviral drug that has been approved for the treatment of RSV infection (the most common cause of bronchiolitis). It is however not routinely used for treating acute bronchiolitis but is specifically recommended in children with co-associated immunodeficiency, congenital heart disease (CHD), and chronic lung disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is the drug of choice for the treatment of atypical pneumonia?", "options": [{"label": "A", "text": "Tetracycline", "correct": false}, {"label": "B", "text": "Amoxicillin", "correct": false}, {"label": "C", "text": "Erythromycin", "correct": true}, {"label": "D", "text": "Co-trimoxazole", "correct": false}], "correct_answer": "C. Erythromycin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Erythromycin Atypical pneumonia is a subset of pneumonia in children which is caused by atypical pathogens, with Mycoplasma pneumoniae and pneumoniae accounting for over 40% of these infections. They typically occur in older subsets of children and have considerably less dyspnea compared to pneumonia caused by typical bacterial pathogens. Their drug of choice is macrolides (such as erythromycin, Azithromycin).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most likely etiological cause of pneumonia with a typical chest X-ray picture shown is:", "options": [{"label": "A", "text": "S. pneumonia", "correct": false}, {"label": "B", "text": "M. pneumonia", "correct": false}, {"label": "C", "text": "Adenovirus", "correct": false}, {"label": "D", "text": "S. aureus", "correct": true}], "correct_answer": "D. S. aureus", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682885006346-QTDK058035IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>S. aureus The chest X-ray shows pneumatocele, which are thin air-filled cysts seen on X-ray and indicates possible etiology to be aureus or Klebsiella (or sometimes E. coli ).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these monoclonal antibodies has been used for the prevention of respiratory infections, particularly Respiratory Syncytial Virus (RSV), in children?", "options": [{"label": "A", "text": "Omalizumab", "correct": false}, {"label": "B", "text": "Rituximab", "correct": false}, {"label": "C", "text": "Cetuximab", "correct": false}, {"label": "D", "text": "Palivilizumab", "correct": true}], "correct_answer": "D. Palivilizumab", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Palivilizumab Palivizumab is a monoclonal antibody effective in the prevention (although not in treatment) of Respiratory Syncytial Virus (RSV) infection. It is effective against both RSV subtypes (A and B). It is given intramuscularly at a dose of 15 mg/kg once every 30 days in a series of 5 monthly intramuscular injections to infants and children during the Respiratory Syncytial Virus RSV season. Although not recommended for routine prophylaxis, it can be considered for high-risk infants during the RSV season (such as children &lt; 2 years of age who require medical therapy for chronic lung disease or CHD).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "LABA when used in asthma management in children is usually administered in combination with:", "options": [{"label": "A", "text": "Short-acting β-agonist (SABA)", "correct": false}, {"label": "B", "text": "Leukotriene receptor antagonists", "correct": false}, {"label": "C", "text": "Inhaled corticosteroids", "correct": true}, {"label": "D", "text": "Cromolyn", "correct": false}], "correct_answer": "C. Inhaled corticosteroids", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Inhaled corticosteroids Asthma is a chronic obstructive airway disease involving inflammation and hyperresponsiveness of the respiratory tract. It is associated with a Th2 type of immune response, as most features of the disease are consistent with Th2 cytokines-driven inflammation. Short-acting beta agonists (SABA) are used primarily as rescue therapy for severe symptoms. Inhaled corticosteroids are the gold standard of asthma maintenance treatment, although there is considerable evidence of their benefits when used in the initial asthma therapy as well. Inhaled long-acting beta-agonists (LABA) should not be used in young children and there is considerable evidence that their monotherapy could expose children to serious adverse events. In older children, they are usually administered in combination with inhaled corticosteroids.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Stertor in newborns is associated with:", "options": [{"label": "A", "text": "Nasopharyngeal obstruction", "correct": true}, {"label": "B", "text": "Supraglottic obstruction", "correct": false}, {"label": "C", "text": "Infraglottic obstruction", "correct": false}, {"label": "D", "text": "Obstruction in lower airways", "correct": false}], "correct_answer": "A. Nasopharyngeal obstruction", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nasopharyngeal obstruction Stertor is a sound produced by tissue vibrations in the nasopharynx as air passes through a partially obstructed nose. In newborns, its most likely cause is inflammatory or infectious rhinitis, with neoplastic, traumatic, and congenital etiologies being less frequent causes.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The nasal potential difference test has been used for diagnosing:", "options": [{"label": "A", "text": "Bronchiolitis obliterans", "correct": false}, {"label": "B", "text": "Alveolar microlithiasis", "correct": false}, {"label": "C", "text": "Cystic fibrosis", "correct": true}, {"label": "D", "text": "Pulmonary alveolar proteinosis", "correct": false}], "correct_answer": "C. Cystic fibrosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Cystic fibrosis Nasal potential difference test evaluates voltage across the nasal epithelium, which results from transepithelial ion transport and is a reflection of the Cystic Fibrosis Transmembrane Regulator (CFTR) function. It has therefore been used in diagnosis of the cystic fibrosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 41 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 8 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 5-month-old baby presents to the emergency with a history of vomiting, irritability, and jaundice. The baby was previously healthy. History of introducing juices into the diet one week back. Ultrasonogram (USG) revealed hepatomegaly and liver function tests were abnormal. The infant most likely has the deficiency of which of the following enzymes ?", "options": [{"label": "A", "text": "Fructokinase", "correct": false}, {"label": "B", "text": "Aldolase B", "correct": true}, {"label": "C", "text": "Galactose- 1- phosphate uridyl transferase", "correct": false}, {"label": "D", "text": "Alpha-glucosidase", "correct": false}], "correct_answer": "B. Aldolase B", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Aldolase B The given history of symptoms, on the introduction of fruit juices, including hepatic dysfunction, points to the diagnosis of hereditary fructose intolerance, which is due to a deficiency of ALDOLASE B</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-day-old child vomits everything he feeds and has a distended abdomen and diarrhoea. The urine is positive for Benedict's test for reducing substance. The substance in urine is ?", "options": [{"label": "A", "text": "Sucrose", "correct": false}, {"label": "B", "text": "Glucose", "correct": false}, {"label": "C", "text": "Galactose", "correct": true}, {"label": "D", "text": "Fructose", "correct": false}], "correct_answer": "C. Galactose", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Galactose The given clinical features of vomiting, abdominal distension, diarrhoea and presence of reducing substance in urine, in a 3-day-old neonate, who is probably on exclusive breastfeeding, suggests an underlying diagnosis of GALACTOSEMIA</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old male child with developmental delay was brought with a squint and bilateral lens subluxation. After 4 years, he died of a massive stroke. Autopsy reveals middle cerebral artery thrombosis and old renal infarcts. The disease course could have been modified by supplement of ?", "options": [{"label": "A", "text": "Thiamine", "correct": false}, {"label": "B", "text": "Pyridoxine", "correct": true}, {"label": "C", "text": "Tyrosine", "correct": false}, {"label": "D", "text": "Methionine", "correct": false}], "correct_answer": "B. Pyridoxine", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pyridoxine The given history of developmental delay, lens subluxation, and stroke points to a diagnosis of homocystinuria. Pyridoxine (Vit B6) is used in the treatment of homocystinuria, cystathioninuria, pyridoxine-dependent epilepsy, vitamin B6 responsive anaemia and xanthurenic aciduria.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-day-old infant born with insignificant antenatal and neonatal history presents with poor feeding, vomiting, lethargy, rapidly progressive coma, metabolic acidosis, a peculiar odour of his urine, hypertonicity with severe opisthotonus which alternate with bouts of flaccidity he was initially empirically diagnosed as having Central Nervous System(CNS) infection and sepsis but was found to have hypoglycemia and the correction of hypoglycemia did not improve the clinical condition. What is the most likely differential for this clinical presentation ?", "options": [{"label": "A", "text": "Phenylketonuria", "correct": false}, {"label": "B", "text": "Maple syrup urine disease", "correct": true}, {"label": "C", "text": "Tyrosinemia", "correct": false}, {"label": "D", "text": "Isovaleric acidemia", "correct": false}], "correct_answer": "B. Maple syrup urine disease", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Maple syrup urine disease Important clinical features of MSUD Infants are normal at birth but develop poor feeding and vomiting in the 1st week of life followed by lethargy and coma. Physical examination reveals hypertonicity and muscular rigidity with severe opisthotonus Periods of hypertonicity may alternate with flaccidity, manifested as the repetitive movement of extremities Seizures occur in most infants and hypoglycemia is the common correction of blood glucose doesn't improve the clinical condition</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-month-old infant presents with a history of vomiting and failure to thrive. The patient improved with IV glucose. After one month, returns with the same complaints. On evaluation, found to have high glutamine and uracil. Which is the likely defect?", "options": [{"label": "A", "text": "Carbamoyl Phosphate Synthetase1 (CPS 1)", "correct": false}, {"label": "B", "text": "Ornithine Transcarbamoylase", "correct": true}, {"label": "C", "text": "Arginase", "correct": false}, {"label": "D", "text": "Argininosuccinate Lyase", "correct": false}], "correct_answer": "B. Ornithine Transcarbamoylase", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ornithine Transcarbamoylase Discuss the findings of each of the above enzyme defects, one by one. Carbamoyl phosphate synthetase I (CPS -1) Hyperammonemia with markedly increased glutamine and alanine Urinary orotic acid is usually low or absent ORNITHINE TRANSCARBAMOYLASE Hyperammonemia with elevated plasma glutamine and alanine Hyperammonemia with elevated plasma glutamine and alanine The marked increase in urinary excretion of orotic acid (differentiating point from cps deficiency) ARGINASE Marked elevation of arginine in plasma and csf Urinary excretion of orotic acid, arginine, lysine, cysteine and ornithine is increased ARGININOSUCCINATE LYASE&gt; Increase in plasma argininosuccinic acid, citrulline, glutamine and alanine. Argininosuccinic acid is found in large amounts of urine and spinal fluid</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-month-old boy presents with failure to thrive. He had several upper respiratory tract infections during the last two months. On examination, hepatosplenomegaly and mild hypotonia are noted. Blood tests reveal pancytopenia and transaminitis. Chest x-ray shows a reticulonodular pattern and calcified nodules. A biopsy of the liver shows foamy histiocytes. What is the expected ophthalmological finding in this patient ?", "options": [{"label": "A", "text": "Cherry red macula", "correct": true}, {"label": "B", "text": "Cataracts", "correct": false}, {"label": "C", "text": "Kayser Fleisher ring", "correct": false}, {"label": "D", "text": "Foveal hypoplasia", "correct": false}], "correct_answer": "A. Cherry red macula", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Cherry red macula The given history of failure to thrive, recurrent respiratory infections with the given x-ray findings and foamy histiocytes on liver biopsy, point to a diagnosis of NIEMANN PICK DISEASE, in which a cherry red spot is seen.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A one-year-old boy presented with hepatosplenomegaly and delayed milestones. The liver biopsy and bone marrow biopsy revealed the presence of histiocytes with PAS-positive diastase-resistant material in the cytoplasm. Electron microscopic examination of these histiocytes is most likely to reveal the presence of?", "options": [{"label": "A", "text": "Birbeck granules in the cytoplasm", "correct": false}, {"label": "B", "text": "Myelin figures in the cytoplasm", "correct": false}, {"label": "C", "text": "Parallel rays of tubular structures in the lysosome", "correct": true}, {"label": "D", "text": "Electron dense deposit in mitochondria", "correct": false}], "correct_answer": "C. Parallel rays of tubular structures in the lysosome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Parallel rays of tubular structures in the lysosome Hepatosplenomegaly with delayed development and given biopsy findings are suggestive of Gaucher’s disease. In Gaucher’s disease electron microscopy reveals lipid material stored as a bilayer in lysosomes. Diagnosis is made by measuring glucocerebrosidase levels in leukocytes or skin fibroblasts. Serum chitotriosidase levels are elevated. Neuro-ophthalmological investigations, hearing assessment by brain-evoked response audiometry, Electroencephalogram EEG and neuro psychometric tests are required. DNA analysis is helpful in the assessment of phenotype and prenatal diagnosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant presents with microcephaly, irritability, increased tone of extremities and recurrent seizures. Tissue examination reveals globoid cells in the parenchyma around blood vessels. What is the most probable diagnosis .?", "options": [{"label": "A", "text": "Tay Sachs disease", "correct": false}, {"label": "B", "text": "Krabbe disease", "correct": true}, {"label": "C", "text": "Canavan's disease", "correct": false}, {"label": "D", "text": "Metachromatic leukodystrophy", "correct": false}], "correct_answer": "B. Krabbe disease", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Krabbe disease Also called globoid cell leukodystrophy, Krabbe disease is an autosomal recessive fatal disorder of infancy.</p>\n<p><strong>Highyeild:</strong></p><p>It results from the deficient activity of galactocerebrosidase and the white matter accumulation of galactosylceramide, which is normally found almost exclusively in the myelin sheath. Both peripheral and central myelin is affected, resulting in spasticity and cognitive impairment coupled with deceptively normal or even absent deep tendon reflexes. The galactocerebrosidase gene is on chromosome 14 (14q31), and specific disease-causing mutations are known. The infantile form of Krabbe disease is rapidly progressive, and patients present in early infancy with irritability, seizures, and hypertonia. Optic atrophy is evident in the 1st yr of life, and mental development is severely impaired. As the disease progresses, optic atrophy and severe developmental delay become apparent; affected children exhibit opisthotonos and die before 3 yr of age. A late-infantile form of Krabbe presents after age 2 yr. Affected individuals have a course similar to that of the early-infantile form. The diagnosis of Krabbe disease relies on the demonstration of the specific enzymatic deficiency in white blood cells or cultured skin fibroblasts. Causative gene mutations have been identified. Carrier identification and prenatal diagnosis are available. The development of methods to measure galactocerebrosidase activity on dried blood spots has led to the inclusion of Krabbe disease in the newborn screening programs of some states. Treatment of infants with Krabbe disease with umbilical cord blood transplantation has been reported in prenatally identified asymptomatic newborns and symptomatic infants. Transplanted infants appear to develop neurologic manifestations at a slower rate but succumb to a neurologic demise.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 18 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 15 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "An 8-month-old infant was brought to the emergency department with complaints of seizure. Past history of seizures present since 6 months of age. On examination, hair, skin, and eye look lightly pigmented and there is a “musty” body odour. He also has microcephaly. Which of the following enzymes is deficient in this baby ?", "options": [{"label": "A", "text": "Homogentisate 1,2- dioxygenase", "correct": false}, {"label": "B", "text": "Cystathionine β-synthase", "correct": false}, {"label": "C", "text": "Phenylalanine hydroxylase", "correct": true}, {"label": "D", "text": "Fumaryl-acetoacetate hydrolase", "correct": false}], "correct_answer": "C. Phenylalanine hydroxylase", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Phenylalanine hydroxylase The signs and symptoms in the question point toward phenylketonuria.</p>\n<p><strong>Highyeild:</strong></p><p>It is an autosomal recessive disorder caused due to decreased phenylalanine hydroxylase or decreased tetrahydrobiopterin (BH4). The main giveaway here is a “musty” odour from the body and urine due to the excretion of phenyl ketones</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Lack of Homogentisate 1,2- dioxygenase causes alkaptonuria Option: B. Lack of Cystathionine β-synthase causes Homocystinuria Option: D. Lack of Fu-aryl-acetoacetate hydrolase causes Hepatorenal tyrosinemia type 1</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Parents of a 1-year-old infant bring their child to the emergency department with complaints of seizures. Multiple such episodes have occurred in the past. On examination, the baby has microcephaly, eczema, lightly pigmented hair, skin, and eye and there is a “musty” odour in urine. Which of the following is true regarding the diagnosis of this disease ?", "options": [{"label": "A", "text": "Screening for this disease must be done at birth", "correct": false}, {"label": "B", "text": "Plasma phenylalanine &gt;100 µmol/L is diagnostic", "correct": false}, {"label": "C", "text": "FeCl3 is used to screen PKU in many countries.", "correct": true}, {"label": "D", "text": "Genetic testing would not help diagnose the disease.", "correct": false}], "correct_answer": "C. FeCl3 is used to screen PKU in many countries.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>FeCl3 is used to screen PKU in many countries. FeCl3 detects urinary phenylpyruvate (one of the three phenyl ketones). FeCl3 screening for PKU is compulsory in many countries.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Screening for this disease must be done 2-3 days after birth as maternal enzyme present during fetal life will not allow an increase in plasma phenylalanine. Option: B. Plasma phenylalanine &gt;1000 µmol/L is diagnostic. Option: D. Other investigations to diagnose PKU include enzymatic and genetic testing.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year-old boy previously diagnosed with phenylketonuria is brought to the clinic by his parents to review his treatment options. Which of the following is advised ?", "options": [{"label": "A", "text": "Avoid artificial sweetener aspartame", "correct": false}, {"label": "B", "text": "Restrict dietary phenylalanine", "correct": false}, {"label": "C", "text": "Add therapy with tetrahydrobiopterin 7-20 mg/kg/day", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Option: A. Artificial sweetener aspartame contains phenylalanine which may aggravate his symptoms. Hence, it should be avoided. Option: B. Diet rich in phenylalanine such as milk, eggs, cheese, nuts, soybeans, chicken, beef, pork, beans, and fish. Option: C. Therapy with tetrahydrobiopterin (BH4) supplement catalyses the conversion of phenylalanine into tyrosine.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "During your rounds in the postnatal ward, you find a mother complaining about her baby’s poor feeding, irritability, rigidity of limbs, and drowsiness. But she was counselled on breastfeeding and discharged to home. After a week, she comes back to your OPD with a new complaint that her baby’s urine smells like burnt sugar. Which enzyme deficiency would you suspect ?", "options": [{"label": "A", "text": "Homogentisate 1,2- dioxygenase", "correct": false}, {"label": "B", "text": "Cystathionine β-synthase", "correct": false}, {"label": "C", "text": "Branched-chain alpha ketoacid dehydrogenase complex", "correct": true}, {"label": "D", "text": "Fumaryl-acetoacetate hydrolase", "correct": false}], "correct_answer": "C. Branched-chain alpha ketoacid dehydrogenase complex", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Branched-chain alpha ketoacid dehydrogenase complex This child is suffering from maple syrup urine disease.</p>\n<p><strong>Highyeild:</strong></p><p>Blocked degradation of branched amino acids (Isoleucine, Leucine, Valine) due to decreased activity of branched-chain alpha ketoacid dehydrogenase causes increased alpha-keto acids in the blood.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Lack of Homogentisate 1,2- dioxygenase causes alkaptonuria Option: B. Lack of Cystathionine β-synthase causes Homocystinuria Option: D. Lack of Fumaryl-acetoacetate hydrolase causes Hepatorenal tyrosinemia type 1</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-year-old infant is brought to the clinic with complaints of seizures, and abnormal movements of limbs. On examination, there is a delay in developmental milestones and urine has a “burnt sugar” odour. How do you diagnose this condition ?", "options": [{"label": "A", "text": "2,4-dinitrophenylhydrazine test", "correct": false}, {"label": "B", "text": "Plasma levels of leucine, isoleucine, valine.", "correct": false}, {"label": "C", "text": "Genetic testing", "correct": false}, {"label": "D", "text": "All the above", "correct": true}], "correct_answer": "D. All the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All the above This child is suffering from maple syrup urine disease. Option: A. 2, 4-dinitrophenylhydrazine (DNPH) detects ketonuria by forming a yellow-white precipitate due to branched-chain keto acids. Option: B. Elevated levels of leucine, isoleucine, and valine in plasma are diagnostic. Option: C. Molecular genetics of MSUD are heterogeneous. Based on the locus affected, genetic subtypes of MSUD are recognised.</p>\n<p><strong>Highyeild:</strong></p><p>Chronic forms of this disease include developmental delay, seizures, failure to thrive, sleep disturbances, mood swings, and movement disorders.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-year-old infant is brought to the clinic. The mother complains that the baby has not even started crawling yet. On examination, there are other developmental milestones delayed and the limbs are rigid. His blood investigations reveal elevated levels of leucine, isoleucine, and valine. Which of the following is true about treatment for this condition ?", "options": [{"label": "A", "text": "Peritoneal or hemodialysis", "correct": false}, {"label": "B", "text": "Restrict isoleucine, valine, and leucine in diet", "correct": false}, {"label": "C", "text": "Thiamine supplementation", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Option: A . Peritoneal or hemodialysis is done to remove the excess levels of branched-chain amino acids e isoleucine, valine, and leucine and their alpha-keto acids. Option: B. Restricting diet containing isoleucine, valine, and leucine includes soy, dairy, peanuts, mushroom, poultry, fish, lentils, and seeds. Option: C. Thiamine is the cofactor of the branched chain alpha ketoacid dehydrogenase complex and its supplementation can help in some milder forms of the disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-month-old infant is brought to the clinic because the mother noticed yellowish discolouration of skin, eyes, and urine. The child also has episodes of vomiting and diarrhoea. Capillary blood glucose 40 mg/dl. On examination, the child has hepatomegaly, jaundice, and ascites. Laboratory investigation reveals elevated alpha-fetoprotein and high levels of tyrosine. Which of the following enzymes is deficient in this condition?", "options": [{"label": "A", "text": "Homogentisate 1,2- dioxygenase", "correct": false}, {"label": "B", "text": "Cystathionine β-synthase", "correct": false}, {"label": "C", "text": "Phenylalanine hydroxylase", "correct": false}, {"label": "D", "text": "Fumaryl-acetoacetate hydrolase", "correct": true}], "correct_answer": "D. Fumaryl-acetoacetate hydrolase", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Fumaryl-acetoacetate hydrolase This infant has hepatorenal tyrosinemia (type 1). Signs and symptoms include vomiting, diarrhoea, hypoglycemia, hepatomegaly, jaundice, and ascites. Death occurs &lt; 10 years from liver failure or cancer or neurological crisis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Lack of Homogentisate 1,2- dioxygenase causes alkaptonuria Option: B. Lack of Cystathionine β-synthase causes Homocystinuria Option: C. Lack of phenylalanine hydroxylase causes phenylketonuria. If you find this question difficult, rule out other easy options.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-year-old infant is brought to the clinic with episodes of vomiting and diarrhoea. Capillary blood glucose shows 40 mg/dl. On examination, the child is lethargic and has an enlarged liver, jaundice, and ascites. Genetic testing reveals the deficient activity of FAH which encodes for fumaryl-acetoacetate hydrolase. Which of the following can be used for diagnosis?", "options": [{"label": "A", "text": "Elevated Alpha-fetoprotein", "correct": false}, {"label": "B", "text": "Elevated levels of tyrosine", "correct": false}, {"label": "C", "text": "Genetic testing", "correct": false}, {"label": "D", "text": "All the above", "correct": true}], "correct_answer": "D. All the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All the above This infant has hepatorenal tyrosinemia (type 1). Signs and symptoms include vomiting, diarrhoea, hypoglycemia, hepatomegaly, jaundice, and Death occurs &lt; 10 years from liver failure or cancer or neurological crisis. Option: A. Increased levels of succinyl acetone cause liver failure. Due to liver failure, elevated alpha-fetoprotein will be seen. Untreated acute and chronic tyrosinosis leads to death from liver failure. Option: B. Elevated levels of tyrosine, methionine, phenylalanine, succinylacetone will be seen in blood. Option: C. Genetic testing is always confirmatory for reduced enzyme activity.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year-old child is brought to the clinic with episodes of vomiting and diarrhoea. On examination, the child is lethargic and has enlarged liver, jaundice, and ascites. Blood investigations show high levels of tyrosine, alpha-fetoprotein, and succinylacetone in blood. Which of the following is true about the treatment of this condition?", "options": [{"label": "A", "text": "Nitisinone", "correct": true}, {"label": "B", "text": "Tetrahydrobiopterin (BH4)", "correct": false}, {"label": "C", "text": "Thiamine supplement", "correct": false}, {"label": "D", "text": "Tyrosine supplement", "correct": false}], "correct_answer": "A. Nitisinone", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nitisinone This child has hepatorenal tyrosinemia (type 1). Signs and symptoms include vomiting, diarrhoea, hypoglycemia, hepatomegaly, jaundice, and ascites. Elevated levels of tyrosine, alpha-fetoprotein, and succinylacetone confirm the diagnosis. Death occurs &lt; 10 years from liver failure or cancer or neurological crisis.</p>\n<p><strong>Highyeild:</strong></p><p>Nitisinone also known as NTBC 1mg/kg/day inhibits hydroxyphenylpyruvate dioxygenase and thus indirectly prevents the formation of succinylacetone. Succinyl acetone is responsible for liver failure in these patients.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Tetrahydrobiopterin is used in the treatment of phenylketonuria. Option: C. Thiamine supplementation helps in milder forms of maple syrup urine disease as thiamine is the cofactor of the enzyme branched chain alpha ketoacid dehydrogenase. Option: D. Tyrosine supplementation does not make sense in treating hepatorenal tyrosinemia. Dietary restriction of tyrosine and phenylalanine should be done.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-month-old infant is brought to the clinic because the mother noticed a blackish stain in the diapers. For further examination, the urine of the patient was collected and left open for a few minutes and the following was observed: Which enzyme is deficient in this patient?", "options": [{"label": "A", "text": "Homogentisate 1,2- dioxygenase", "correct": true}, {"label": "B", "text": "Cystathionine β-synthase", "correct": false}, {"label": "C", "text": "Phenylalanine hydroxylase", "correct": false}, {"label": "D", "text": "Fumaryl-acetoacetate hydrolase", "correct": false}], "correct_answer": "A. Homogentisate 1,2- dioxygenase", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883008023-QTDK012010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Homogentisate 1,2- dioxygenase The diagnosis here is alkaptonuria. It is an autosomal recessive disorder caused due to deficient homogentisate 1,2-dioxygenase.</p>\n<p><strong>Highyeild:</strong></p><p>Signs and symptoms include urine turning brown and black on standing, staining of the diaper, grey discolouration of sclera, ear and nose cartilage (ochronosis) after 30 years, arthritis of shoulders, hips, and renal stones.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Lack of Cystathionine β-synthase causes Homocystinuria Option: C. Lack of Phenylalanine hydroxylase causes phenylketonuria Option: D. Lack of Fumaryl-acetoacetate hydrolase causes Hepatorenal tyrosinemia type 1</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Parents of a 9-month-old infant bring their child to the OPD with complaints of greyish discolouration of sclera. You collect urine from the baby and keep it standing and notice that colour of the urine turns black. Which enzyme from the following flowchart is deficient in this patient?", "options": [{"label": "A", "text": "i.", "correct": false}, {"label": "B", "text": "ii.", "correct": false}, {"label": "C", "text": "iii.", "correct": true}, {"label": "D", "text": "iv.", "correct": false}], "correct_answer": "C. iii.", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883008313-QTDK012011IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>iii. The diagnosis here is alkaptonuria . It is an a utosomal recessive disorder caused due to deficient homogentisate 1,2-dioxygenase. Homogentisate 1,2-dioxygenase or simply homogentisate oxidase converts homogentisic acid into maleylacetoacetic acid. Deficiency of this enzyme results in pigment-forming homogentisate build-up in tissues causing alkaptonuria.</p>\n<p><strong>Highyeild:</strong></p><p>Signs and symptoms include urine turning brown and black on standing, staining of the diaper, grey discolouration of sclera, ear, and nose cartilage (ochronosis) after 30 years, arthritis of shoulders, hips, and renal stones.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Phenylalanine hydroxylase. A deficiency of this enzyme causes phenylketonuria Option: B. p-hydroxyphenylpyruvate dioxygenase. A deficiency of this enzyme causes Type III Tyrosinemia. Option: D. iv. Fumarylacetoacetate hydrolase. A deficiency of this enzyme causes Type I Tyrosinemia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-year-old infant is brought to the clinic because the mother noticed greyish discolouration of the sclera and blackish stain in diapers. Prolonged standing of urine shows colour turning to black. Which of the following is true about the diagnosis of this disorder?", "options": [{"label": "A", "text": "Plasma phenylalanine &gt;1000 μmol/L", "correct": false}, {"label": "B", "text": "Gas chromatography of urine to quantify homogentisic acid.", "correct": true}, {"label": "C", "text": "Elevated Alpha-fetoprotein in blood", "correct": false}, {"label": "D", "text": "Elevated plasma valine", "correct": false}], "correct_answer": "B. Gas chromatography of urine to quantify homogentisic acid.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Gas chromatography of urine to quantify homogentisic acid. Gas chromatography/ mass spectrometry of urine can detect the quantity of homogentisic acid in urine.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Plasma phenylalanine &gt;1000 μmol/L is diagnostic of phenylketonuria Option: C. Elevated Alpha-fetoprotein in the blood is seen in hepatic disorders/ carcinoma. Among protein metabolism disorders, only hepatorenal tyrosinemia can cause liver failure and hence elevated alpha-fetoprotein. Option: D. Elevated levels of leucine, isoleucine, and valine are seen in maple syrup urine disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 9-year-old girl with tall stature presents with seizures to the clinic. Significant history of delay in developmental milestones is present. On examination, she has the following features: Which of the following enzymes is deficient in her?", "options": [{"label": "A", "text": "Homogentisate 1,2- dioxygenase", "correct": false}, {"label": "B", "text": "Cystathionine β-synthase", "correct": true}, {"label": "C", "text": "Phenylalanine hydroxylase", "correct": false}, {"label": "D", "text": "Fumaryl-acetoacetate hydrolase", "correct": false}], "correct_answer": "B. Cystathionine β-synthase", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883008641-QTDK012013IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Cystathionine β-synthase The images show marfanoid habitus and ectopia lentis. The signs and symptoms point towards homocystinuria.</p>\n<p><strong>Highyeild:</strong></p><p>It is an autosomal recessive disorder caused due to deficient Cystathionine β-synthase. Manifestations occur after 3-4 years of age. Signs and symptoms include developmental delay, seizures, psychiatric problems, extrapyramidal signs, marfanoid habitus, osteoporosis and ectopia lentis by 8 years. Thromboembolism is a cause of early death and morbidity in these patients.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Lack of Homogentisate 1,2- dioxygenase causes alkaptonuria Option: C. Lack of phenylalanine hydroxylase causes phenylketonuria. Option: D. Lack of Fumaryl-acetoacetate hydrolase causes Hepatorenal tyrosinemia type 1</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old boy is brought to the emergency department with seizures. On further examination, you find marfanoid features. Investigations revealed the diagnosis of homocystinuria. Which of the following could have been used for the diagnosis of this condition?", "options": [{"label": "A", "text": "Urine nitroprusside test", "correct": false}, {"label": "B", "text": "Plasma levels of methionine", "correct": false}, {"label": "C", "text": "Plasma levels of homocysteine", "correct": false}, {"label": "D", "text": "All the above.", "correct": true}], "correct_answer": "D. All the above.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All the above. The signs and symptoms point towards homocystinuria. It is an autosomal recessive disorder caused due to deficient Cystathionine β-synthase. Manifestations occur after 3-4 years of age. Option: A. Urine nitroprusside test. Homocysteine gets converted to homocysteine in presence of nitroprusside which gives a magenta colour. Option: B &amp; C. High plasma levels of methionine and homocysteine are diagnostic.</p>\n<p><strong>Highyeild:</strong></p><p>Signs and symptoms include developmental delay, seizures, psychiatric problems, extrapyramidal signs, marfanoid habitus, osteoporosis and ectopia lentis by 8 years. Thromboembolism is a cause of early death and morbidity in these patients.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-year-old girl is brought to the clinic with a complaint of being taller in height than her classmates and having long fingers and toes. On examination she also has the following finding: Further investigations revealed high plasma levels of methionine and homocysteine. What are the treatment options for this disease?", "options": [{"label": "A", "text": "Methionine-restricted diet", "correct": false}, {"label": "B", "text": "Oral betaine", "correct": false}, {"label": "C", "text": "Vitamin C", "correct": false}, {"label": "D", "text": "All the above", "correct": true}], "correct_answer": "D. All the above", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883008822-QTDK012015IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All the above The image shown here is ectopia lentis. The signs and symptoms point towards homocystinuria. Option: A. A diet restricted in methionine such as egg whites, seafood, meat, and certain nuts and seeds helps in maintaining lower plasma homocysteine levels (desired: &lt; 15 μmol/L). Option: B. Betaine therapy works by converting homocysteine back into methionine Option: C. Vitamin C helps prevent endothelial dysfunction. It is important because thromboembolism is a cause of early death and morbidity in these patients</p>\n<p><strong>Highyeild:</strong></p><p>It is an autosomal recessive disorder caused due to deficient Cystathionine β-synthase. Manifestations occur after 3-4 years of age. Signs and symptoms include developmental delay, seizures, psychiatric problems, extrapyramidal signs, marfanoid habitus, osteoporosis and ectopia lentis by 8 years. Thromboembolism is a cause of early death and morbidity in these patients.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 25 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 6 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 3-day-old baby boy, born at 36 weeks of gestation, regurgitates the feeds given to him. On abdominal examination, an airless hollow abdomen is present. A contrast study is performed &amp; the findings are as shown below. What is the probable diagnosis?", "options": [{"label": "A", "text": "Esophageal atresia in TEF type B", "correct": false}, {"label": "B", "text": "Esophageal atresia in TEF type C", "correct": false}, {"label": "C", "text": "Esophageal atresia in TEF type D", "correct": false}, {"label": "D", "text": "Esophageal atresia in TEF type A", "correct": true}], "correct_answer": "D. Esophageal atresia in TEF type A", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883978552-QTDK034001IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Esophageal atresia in TEF type A The defect shown in the contrast study depicts oesophageal atresia(EA). TEF type A is isolated oesophageal atresia. Type C is the most common. Plain X-ray in the evaluation of respiratory distress might reveal a coiled feeding tube in the oesophageal pouch or an air-distended stomach, indicating the presence of a coexisting TEF. However, pure EA can manifest as an airless hollow abdomen.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A baby born at 40 weeks with a history of polyhydramnios in utero presents with respiratory distress at birth &amp; frothing in the nose is observed. What would be the immediate Investigation of choice?", "options": [{"label": "A", "text": "Barium meal", "correct": false}, {"label": "B", "text": "Passing a nasogastric tube with subsequent chest radiography", "correct": true}, {"label": "C", "text": "Chest radiography", "correct": false}, {"label": "D", "text": "CT scan of nose", "correct": false}], "correct_answer": "B. Passing a nasogastric tube with subsequent chest radiography", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Passing a nasogastric tube with subsequent chest radiography A baby with the above features is diagnostic of TEF with possible oesophagal This can be confirmed with a chest radiography image showing a coiled nasogastric tube in the oesophagal pouch, as shown below. Features of oesophagal atresia are: Early onset respiratory distress Frothing at the mouth &amp; nose History of polyhydramnios Radiography findings: Passing a nasogastric tube with subsequent chest radiography will reveal a coiled nasogastric tube In the oesophagal pouch. If an air-distended stomach is present, it indicates the presence of a coexisting TEF. Pure EA can manifest as an airless hollow/scaphoid abdomen. Image of an X-ray showing a coiled NG tube in the oesophagus:-</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. If findings of ultrasound are conclusive in cases like CHPS (congenital hypertrophic pyloric stenoses), various oesophagal disorders, stomach diseases etc., Barium meal is done, which demonstrates -an elongated pyloric channel (string sign), parallel streaks of barium seen in the narrowed channel, producing a \"double-tract sign\". Option: C. Chest radiography is used to diagnose infections like pneumonia, pneumothorax, bronchitis, carcinoma. They also detects chronic lung conditions like emphysema, cystic fibrosis, cardiomegaly, asthama etc. Option: D. CT scan of nose is primarily used to detect the presence of inflammatory diseases like allergic rhinitis, chronic sinusutis with polyps, DNS, CSF leaks etc. and also helps in diagnosis of sinusitis such as maxillary, spenoid, ethmoid &amp; frontal.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A young child is brought to the pediatrician for recurrent respiratory infections &amp; dysphagia. Barium swallow reveals compression of oesophagus at the level of aortic arch. CECT shows the following finding as shown. Which anomaly is most commonly seen in this condition?", "options": [{"label": "A", "text": "Aberrant left subclavian artery", "correct": false}, {"label": "B", "text": "Aberrant left vertebral artery", "correct": false}, {"label": "C", "text": "Aberrant right subclavian artery", "correct": true}, {"label": "D", "text": "Aberrant innominate artery", "correct": false}], "correct_answer": "C. Aberrant right subclavian artery", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883978607-QTDK034003IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Aberrant right subclavian artery The given case scenario suggests a diagnosis of Dysphagia lusoria , and the most common anomaly seen in this condition is aberrant right subclavian artery.</p>\n<p><strong>Highyeild:</strong></p><p>It is a dysphagia produced due to extrinsic compression of the esophagus by an aberrant right subclavian artery or double aortic arch. It is dignosed by CT angiography . A barium swallow shows fixed narrowing of the esophagus at the level of aortic arch without mucosal abnormality. Treatment is surgical repair either by reconstruction or ligation of the aberrant right subclavian artery. Aberrant left subclavian artery is very rare anomaly and does not occur in this condition. Aberrant left vertebral artery originates fromn arch distal to left subclavian artery with segmental regression of the dorsal aorta between the 6th &amp; 7th intersegmental arteries. It runs through the spinal coloumn in the neck &amp; provides blood to the brain and spine. Aberrant innominate artery is a very rare occurence. Although asymptomatic, it can be fatal in any surgery involving the neck &amp; thorax, particularly in a percutaneous tracheostomy. Also known as brachiocephalic artery and usually takes its origin to the left of the trachea &amp; subsequently compresses trachea.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year old child was playing &amp; meanwhile, he found a metal coin and accidently ingested it and started crying with dysphagia &amp; breathlessness. He was immediately brought to the ER by his parents. What would be the next best step in the management of this child?", "options": [{"label": "A", "text": "Urgent upper G.I endoscopy &amp; removal", "correct": true}, {"label": "B", "text": "Observation &amp; follow-up in 24hours", "correct": false}, {"label": "C", "text": "Wait till foreign body passes out in the faeces", "correct": false}, {"label": "D", "text": "Repeat x-ray after every 2hours", "correct": false}], "correct_answer": "A. Urgent upper G.I endoscopy & removal", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Urgent upper G.I endoscopy &amp; removal Here in this case the, the next best step in the management of this child is urgent endoscopy &amp; its removal.</p>\n<p><strong>Highyeild:</strong></p><p>Sharp foreign bodies, batteries or metal coins can cause damage by perforation secondary to pressure or chemical necrosis and can present with dysphagia, mediastinitis or upper G.I bleeding. The most frequent sites of impaction are at the cricopharynx, mid esophagus at tracheal bifurcation and just above LES. According to guidelines, no foreign body should be left in the esophagus for &gt;24hours. Endoscopic removal under anesthesia is the standard of therapy. In x-ray findings:- if foreign body is present in the esophagus, it appears as a slit-like object. If foreign body is present in the trachea, it appears like a round object on seeing.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A young child was sleeping on his mother's lap, meanwhile she noticed redness on palms of her child. The next day, she took him to the hospital &amp; on examination, the doctor found ascites and splenomegaly &amp; the doctor advised to admit him, after few hours of admitting the child, he started vomiting fresh blood. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Mallory-weis tear", "correct": false}, {"label": "B", "text": "Esophageal varices", "correct": true}, {"label": "C", "text": "Schistosomiasis", "correct": false}, {"label": "D", "text": "Splenic vein thrombosis", "correct": false}], "correct_answer": "B. Esophageal varices", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Esophageal varices A child presenting with hematemesis, ascites and splenomegaly is likely to have varices &amp; results in variceal bleeding. Upper G.I endoscopy is the preffered diagnostic test for esophageal varices. The management of variceal bleeding: Attain hemodynamic stability through blood transfusion/ fluids Vasoactive drugs (e.g octreotide) Endoscopy to perform ligation or sclerotherapy Transjugular intrahepatic portosystemic shunt is considered for variceal bleeding. Secondary prophylaxis to reduce the recurrence of bleeding includes: Non-selective beta blockers Obliteration of varices through treatment via ligation or sclerotherapy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A . Mallory-weis tear is the tear of tissue of lower esophagus, most commonly occurs in the age of 40 &amp; 60years and rare in children. Most often presents with violent cough or vomiting (coffee-ground vomitus), shortness of breath, black stools, diarrhoea, paleness etc. It is diagnosed by If not treated, it leads to anemia, fatigue, shortness of breath &amp; even shock. Option: C . Schistosomiasis is caused by infection with fresh-water parasitic worms. also known as It occurs within 1-2 months of infection, symptoms develop like fever, chills, cough &amp; muscle aches. Signs &amp; symptoms of c hronic schistosomiasis includes: abdominal pain, hepatomegaly, blood in the stools, urine etc. Option: D. Splenic vein thrombosis is an uncommon condition in which the splenic vein becomes thrombosed, most frequently in pancreatitis . Mostly occurs after 40 years of age. Symptoms are: firstly asymptomatic, abdominal pain, variceal bleeding, splenomegaly, thrombocytopenia, jaundice with or without encephalopathy.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A young girl was aadmitted with chief comolaints of dysphagia, vomiting &amp; weight loss. The condition worsened in the last 2 months followed by failure to thrive. Her barium swallow shows finding as shown below &amp; she is advised to undergo esophageal manometry. What is the likely diagnosis?", "options": [{"label": "A", "text": "Diffuse esophageal spasm", "correct": false}, {"label": "B", "text": "Gastro esophageal reflux disease", "correct": false}, {"label": "C", "text": "Esophageal stricture", "correct": false}, {"label": "D", "text": "Achalsia cardia", "correct": true}], "correct_answer": "D. Achalsia cardia", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883978698-QTDK034006IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Achalsia cardia The image shows a dilated esophagus &amp; a characteristic bird-beak's appearance (distal narrowing) suggestive of Achalasia cardia. It is caused due to the degeneration of neurons in the myenteric plexus of the esophagus . This results in failure of relaxation of LES on swallowing.</p>\n<p><strong>Highyeild:</strong></p><p>The patient presents with a classic triad of Dysphagia, Regurgitation, and Weight loss. The dysphagia initially begins with liquid foods and then progresses to solid foods . As food gets accumulated in the esophagus, patient may complain of halitosis. The avg. age at diagnosis in children occurs around 8-9 years. The diagnosis is made by Barium swallow showing esophageal dilatation with beak-like narrowing at the LES. The gold standard test to confirm achalasia cardia is Esophageal Manometry.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A . Diffuse esophageal spasm is characterized by simultaneous multi-peaked contractions of the esophagus. The contractions are spontaneous and may be of abnormally high amolitude (&gt; 120 mm hg) or long duration. Intermittent normal peristalsis is seen. Option: B . GERD is gasroesophageal reflux disease is passage of gastric contents into esophagus with or without regurgitation and vomiting. it normally occurs in children beyond 3months of age.The common symptoms are : Recurrent regurgitation Weight loss Irritability in infants Heartburn or chest pain Hematemesis, dysphagia &amp; odynophagia Wheezing, stridor, cough, hoarseness Option: C. Esophageal stricture is most common located in the middle or lower esophagus. This may be of 3 types: web or diaphragm, fibromuscular stenosis and cartilaginous stenosis. Symptoms like vomiting, chest infection due to aspiration, dysphagia, frequent episodes of choking typically develop around 6 months of age, when weaning is started.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 16 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 13 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 6year old child presented with complaints of chronic productive cough, constant runny nose, nasal congestion, and recurrent episodes of acute otitis media. A previous chest X-ray is given below. In this case, what is the defective structure?", "options": [{"label": "A", "text": "Dynein", "correct": true}, {"label": "B", "text": "Keratin", "correct": false}, {"label": "C", "text": "Collagen", "correct": false}, {"label": "D", "text": "Elastin", "correct": false}], "correct_answer": "A. Dynein", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883796272-QTDK027003IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Dynein The given scenario suggests a triad of bronchiectasis, chronic sinusitis, and situs inversus, seen on chest X-ray as a right-sided aortic arch and right-sided stomach bubble, which is seen in Kartagener syndrome in which Defective left-right dynein arm leads to situs inversus.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child presented with up-slanting palpebral fissures, a flat nasal bridge, and a transverse palmar crease. What heart defect will be seen in this child?", "options": [{"label": "A", "text": "Ebstein's Anomaly", "correct": false}, {"label": "B", "text": "Tricuspid atresia", "correct": false}, {"label": "C", "text": "Transposition of the great arteries (TGA)", "correct": false}, {"label": "D", "text": "Endocardial cushion defect", "correct": true}], "correct_answer": "D. Endocardial cushion defect", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Endocardial cushion defect The child has Down’s syndrome, which is most commonly associated with endocardial cushion defects , seen on echo or X-ray as a gooseneck sign.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant presented with tachypnea, poor feeding, poor growth, sweating and pallor. The physical appearance of up-slanting palpebral fissures, flat nasal bridge, transverse palmar crease. Echocardiography findings are shown in the image below. What heart defect will be seen in this child?", "options": [{"label": "A", "text": "Endocardial cushion defect", "correct": true}, {"label": "B", "text": "Patent ductus arteriosus (PDA)", "correct": false}, {"label": "C", "text": "Ebstein's anomaly", "correct": false}, {"label": "D", "text": "Transposition of the great arteries (TGA)", "correct": false}], "correct_answer": "A. Endocardial cushion defect", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883796347-QTDK027005IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Endocardial cushion defect The infant has Down’s syndrome, most commonly associated with endocardial cushion defects that present with heart failure, seen on echo or Xray as gooseneck signs.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A pregnant lady was undergoing fetal Doppler. The senior radiologist asked the intern about the sequence of the flow of oxygenated blood in the fetus. Which of the following should be told?", "options": [{"label": "A", "text": "Umbilical Vein &gt; ductus venosus &gt; IVC &gt; Right atrium &gt; Left atrium", "correct": true}, {"label": "B", "text": "Umbilical artery &gt; IVC &gt; ductus venosus &gt; Right atrium &gt; Left atrium", "correct": false}, {"label": "C", "text": "Umbilical vein &gt; SVC &gt; ductus arteriosus &gt; Right atrium &gt; Left atrium", "correct": false}, {"label": "D", "text": "Umbilical artery &gt; SVC &gt; right atrium &gt; ductus arteriosus &gt; left atrium", "correct": false}], "correct_answer": "A. Umbilical Vein > ductus venosus > IVC > Right atrium > Left atrium", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Umbilical Vein &gt; ductus venosus &gt; IVC &gt; Right atrium &gt; Left atrium Fetus receives oxygenated blood from the placenta via a left umbilical vein , which drains into IVC via ductus venosus. Mixing of oxygenated blood from the placenta and deoxygenated blood from the lower half of the body and Gut (portal vein) occurs in IVC.</p>\n<p><strong>Highyeild:</strong></p><p>IVC and SVC drain into RA, but before mixing, 1/3 of IVC blood drains directly into LA via foramen ovale and then to the LV &gt; ascending aorta &gt; brain and upper body. The rest of the blood from IVC mixes with the blood flowing in front of SVC within RV and is ejected out of the heart via the pulmonary trunk. Due to the high resistance of fetal pulmonary vasculature, most blood in the pulmonary trunk bypasses the ductus arteriosus . It enters the descending aorta, which supplies the lower body. The blood is carried to the placenta via the umbilical artery for oxygenation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "After delivering a child in the labor room, the child was examined, and on auscultation, a continuous machinery murmur was heard. Where is the structure responsible ATTACHED TO AORTA?", "options": [{"label": "A", "text": "Just distal to the left subclavian", "correct": true}, {"label": "B", "text": "Just proximal to the left subclavian", "correct": false}, {"label": "C", "text": "Just distal to the left common carotid", "correct": false}, {"label": "D", "text": "Just proximal to the left common carotid", "correct": false}], "correct_answer": "A. Just distal to the left subclavian", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Just distal to the left subclavian The structure responsible for the continuous machinery murmur in a neonate is the ductus arteriosus which is located between the pulmonary artery and the descending aorta . It enters the pulmonary artery at its bifurcation and the descending aorta Just distal to the left subclavian.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "After delivering a child in the labor room, the child was examined and on auscultation, a continuous machinery murmur was heard. Usually, when does the structure responsible for this murmur functionally close?", "options": [{"label": "A", "text": "Immediately after birth", "correct": false}, {"label": "B", "text": "10 hours after birth", "correct": true}, {"label": "C", "text": "10 days after birth", "correct": false}, {"label": "D", "text": "10 days before birth", "correct": false}], "correct_answer": "B. 10 hours after birth", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>10 hours after birth The ductus arteriosus responsible for the continuous machinery murmur due to blood flow from descending aorta to the pulmonary artery during both systole and diastole functionally closes 10-15 hours after birth due to increased pO2.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A neonate required emergency delivery room resuscitation. What is the preferred vessel for cannulation?", "options": [{"label": "A", "text": "Femoral vein", "correct": false}, {"label": "B", "text": "Subclavian vein", "correct": false}, {"label": "C", "text": "Internal jugular vein", "correct": false}, {"label": "D", "text": "Umbilical vein", "correct": true}], "correct_answer": "D. Umbilical vein", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Umbilical vein Is the preferred vessel for emergency delivery room resuscitation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following vessels in a fetus have the highest concentration of oxygen?", "options": [{"label": "A", "text": "Inferior vena cava (IVC)", "correct": false}, {"label": "B", "text": "Superior vena cava (SVC)", "correct": false}, {"label": "C", "text": "Umbilical vein", "correct": true}, {"label": "D", "text": "Pulmonary vein", "correct": false}], "correct_answer": "C. Umbilical vein", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Umbilical vein Has the highest oxygen concentration.</p>\n<p><strong>Highyeild:</strong></p><p>Fetus receives oxygenated blood from the placenta via the left umbilical vein, which drains into the Inferior vena cava (IVC) via ductus venosus. Mixing of oxygenated blood from the placenta and deoxygenated blood from the lower half of the body and the Gut (portal vein) occurs in the Inferior vena cava (IVC). Inferior vena cava (IVC) and superior vena cava (SVC) drain into the right atrium (RA), but before mixing, 1/3 of Inferior vena cava (IVC) blood drains directly into the Left atrium (LA) via foramen ovale and then to the Left ventricle (LV)&gt;ascending aorta&gt; brain and upper body. The rest of the blood from the Inferior vena cava (IVC) mixes with the blood flowing in front Superior vena cava (SVC) within the Right ventricle (RV). It is ejected out of the heart via the pulmonary trunk. Due to the high resistance of fetal pulmonary vasculature, most blood in the pulmonary trunk bypasses the ductus arteriosus. It enters the descending aorta, which supplies the lower body. The blood is carried to the placenta via the umbilical artery for oxygenation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant born to a diabetic mother was diagnosed to have a ventricular septal defect. Which of the following is not seen in this condition?", "options": [{"label": "A", "text": "A mid-diastolic murmur at mitral area", "correct": false}, {"label": "B", "text": "pan systolic murmur at left 5th intercostal space", "correct": false}, {"label": "C", "text": "Ejection systolic murmur at pulmonary area", "correct": false}, {"label": "D", "text": "Reverse splitting of heart sounds two", "correct": true}], "correct_answer": "D. Reverse splitting of heart sounds two", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Reverse splitting of heart sounds two Ventricular septal defect (VSD) has left to right shunt between Left ventricle (LV) and Right ventricle (RV). Increased blood flow in the Right ventricle (RV) leads to a delayed P2 , and early emptying of the Left ventricle (LV) leads to an early A2 leading to comprehensive, variable split heart sound 2. Pansystolic murmur is the shunt murmur of Ventricular septal defect (VSD) heard at the left 5th intercostal space. Mid diastolic murmur at the mitral area and ejection systolic murmur at the pulmonary site are flow murmurs.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "While examining a child, you hear a widely split S2 on auscultation. Which of the following is not a possible diagnosis?", "options": [{"label": "A", "text": "Atrial septal defect", "correct": false}, {"label": "B", "text": "Ventricular septal defect", "correct": false}, {"label": "C", "text": "Pulmonary stenosis", "correct": false}, {"label": "D", "text": "Left bundle branch block", "correct": true}], "correct_answer": "D. Left bundle branch block", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Left bundle branch block Left bundle branch block. It shows the paradoxical split of S2. Atrial septal defect (ASD) , Ventricular septal defect (VSD), Pulmonary stenosis (PS), and Mitral regurgitation (MR) show wide split S2</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "While examining a child, you hear a fixed wide split S2 on auscultation. Which of the following is the diagnosis?", "options": [{"label": "A", "text": "Atrial septal defect", "correct": true}, {"label": "B", "text": "Ventricular septal defect", "correct": false}, {"label": "C", "text": "Right bundle branch block", "correct": false}, {"label": "D", "text": "Left bundle branch block", "correct": false}], "correct_answer": "A. Atrial septal defect", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Atrial septal defect The left to right shunt in Atrial septal defect (ASD) leading to delayed closure of pulmonary valve independent of inspiration or expiration causes the fixed wide split of S2.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "3-year-old Raman is brought to his family doctor primarily because his feet and legs feel cold to his mother, even in the summers. The Pediatrician examines Raman and finds his femoral pulse weak compared to his radial pulse. His blood pressure in his upper limbs is also raised. The most likely diagnosis to be considered is", "options": [{"label": "A", "text": "Takayasu arteritis.", "correct": false}, {"label": "B", "text": "Coarctation of aorta", "correct": true}, {"label": "C", "text": "Hypoplastic left heart syndrome", "correct": false}, {"label": "D", "text": "Femoral artery thrombosis.", "correct": false}], "correct_answer": "B. Coarctation of aorta", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Coarctation of aorta Coarctation of the aorta is located at the junction of the arch with the descending aorta .</p>\n<p><strong>Highyeild:</strong></p><p>A sharp indentation involving the anterior, lateral, and posterior walls of the aorta, sparing the medial wall. Clinical features include Newborns with severe coarctation present with left ventricular failure. Older children may present with decreased femoral pulse and hypertension. Diagnosis: Electrocardiograph (ECG) shows LVH , Chest X-ray shows a normal-sized heart with the prominent ascending aorta and the aortic knuckle, notching of lower ribs. Barium swallow shows reverse three signs of E sign</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which one the following is incorrect statement about the hemodynamic classification of congenital heart disease", "options": [{"label": "A", "text": "Atrial septal defect (ASD),Patent ductus arteriosus (PDA),Ventricular Septal Defect (VSD) -right to left shunt", "correct": true}, {"label": "B", "text": "Parallel circulation - Transposition of great arteries", "correct": false}, {"label": "C", "text": "Critical aortic stenosis – ductus dependent systemic circulation", "correct": false}, {"label": "D", "text": "Tetralogy of fallot – VSD- PS physiology", "correct": false}], "correct_answer": "A. Atrial septal defect (ASD),Patent ductus arteriosus (PDA),Ventricular Septal Defect (VSD) -right to left shunt", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Atrial septal defect (ASD),Patent ductus arteriosus (PDA),Ventricular Septal Defect (VSD) -right to left shunt In ASD,VSD ,PDA shunt is from left to right. Haemodynamic classification of congenital heart diseases. Pretricuspid shunt ASD, Partial anomalous pulmonary venous connection Post tricuspid shunt VSD, PDA VSD-PS physiology (Fallot physiology TOF, TGA with VSD with PS, DORV with PS with large subaortic VSD, tricuspid atresia with diminished pulmonary blood flow, single ventricle with PS Single Ventricle Physiology Single ventricle, atresia of one of the AV valves, severe hypoplasia of one of the ventricles Duct dependent lesions Severe coarctation of the aorta, critical aortic stenosis, pulmonary atresia</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 23 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 21 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Which of the following is the main hormone controlling intrauterine growth?", "options": [{"label": "A", "text": "Insulin", "correct": true}, {"label": "B", "text": "Human placental lactogen", "correct": false}, {"label": "C", "text": "Growth hormone", "correct": false}, {"label": "D", "text": "Glucocorticoids", "correct": false}], "correct_answer": "A. Insulin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Insulin Both hormones, insulin and thyroxine are required for normal growth and development in fetal life, although insulin is the main hormone controlling fetal growth . Glucocorticoids also play an important role in late gestation. Growth hormone has no role in intrauterine growth.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A mother of a child delivered at 38 weeks gestation is concerned that her child has been losing weight since the last 3-4 days after birth. You reassure her that this is seemingly normal and the newborn is likely to regain his birth weight by", "options": [{"label": "A", "text": "20th day", "correct": false}, {"label": "B", "text": "5th day", "correct": false}, {"label": "C", "text": "10th day", "correct": true}, {"label": "D", "text": "1st month", "correct": false}], "correct_answer": "C. 10th day", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>10th day Normally, all term babies lose 8-10% of birth weight in the first week; primarily attributed to the loss of a portion of their TBW content . Term newborns regain their birth weight by 7-10 days of age. As explained, this weight loss is primarily due to the loss of extracellular fluids from the body.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "During a routine examination, a 1-day-old neonate is noticed to have acrocyanosis and you measure the axillary temperature which is 34°C. Based on his temperature, the newborn would be considered to be in the :", "options": [{"label": "A", "text": "Cold stress", "correct": false}, {"label": "B", "text": "Moderate hypothermia", "correct": true}, {"label": "C", "text": "Severe hypothermia", "correct": false}, {"label": "D", "text": "Normal newborn", "correct": false}], "correct_answer": "B. Moderate hypothermia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Moderate hypothermia Normal body temperature in a newborn: 36.5°C to 37.5°C Hypothermia: Less than 36.5°C Cold stress (or mild hypothermia): 36.0 to 36.4°C Moderate hypothermia: 32 to 35.9°C Severe hypothermia: &lt; 32°C Hyperthermia: Greater than 37.5°C.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Hypothermia in a newborn is defined when the axillary temperature is less than?", "options": [{"label": "A", "text": "33°C", "correct": false}, {"label": "B", "text": "34°C", "correct": false}, {"label": "C", "text": "36°C", "correct": false}, {"label": "D", "text": "36.5°C", "correct": true}], "correct_answer": "D. 36.5°C", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>36.5°C Normal body temperature: 36.5°C to 37.5°C Hypothermia: Less than 36.5°C However, it is noteworthy that a temperature less than 36°C is defined as hypothermia as per the recent AHA resuscitation 2020 guidelines</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What percentage of term infants will pass meconium within 48 hours?", "options": [{"label": "A", "text": "95 per cent", "correct": false}, {"label": "B", "text": "99 per cent", "correct": true}, {"label": "C", "text": "100 per cent", "correct": false}, {"label": "D", "text": "90 per cent", "correct": false}], "correct_answer": "B. 99 per cent", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>99 per cent Meconium is the first stool the baby will pass which is black. Newborns pass meconium within the 1st 12-24 hr after birth. Newborns should pass meconium within 24 hours, but you may need to wait for no passage of meconium even after 48 hours before you consider investigations as 99% of term infants and 95% of premature infants pass meconium by 48 hr of birth.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A normal newborn should pass urine within how many hours of birth?", "options": [{"label": "A", "text": "12 hrs", "correct": false}, {"label": "B", "text": "24 hrs", "correct": false}, {"label": "C", "text": "48 hrs", "correct": true}, {"label": "D", "text": "72hrs", "correct": false}], "correct_answer": "C. 48 hrs", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>48 hrs A normal newborn should pass urine within 48 hours of birth and should pass meconium within 24 hrs of birth.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-day-old neonate came for follow up and you notice a red fleshy lesion in the umbilicus as shown below. What is the diagnosis?", "options": [{"label": "A", "text": "Umbilical hernia", "correct": false}, {"label": "B", "text": "Omphalocele", "correct": false}, {"label": "C", "text": "Umbilical granuloma", "correct": true}, {"label": "D", "text": "Abscess", "correct": false}], "correct_answer": "C. Umbilical granuloma", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883281732-QTDK015007IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Umbilical granuloma Umbilical granuloma can be seen in some newborns after the fall of the umbilical cord. It is the persistence of granulation tissue at the base of the umbilicus. The tissue is soft, 3-10 mm in size, vascular and granular, coloured dull red or pink, and may have a seropurulent discharge. Granulation tissue is treated by cauterization with silver nitrate.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-month-old baby is brought by the mother. She is concerned that after the fall of the umbilical cord, she is noticing a swelling in the umbilical stump region, as shown below. What is the diagnosis?", "options": [{"label": "A", "text": "Umbilical hernia", "correct": true}, {"label": "B", "text": "Omphalocele", "correct": false}, {"label": "C", "text": "Umbilical granuloma", "correct": false}, {"label": "D", "text": "Gastroschisis", "correct": false}], "correct_answer": "A. Umbilical hernia", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883281802-QTDK015008IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Umbilical hernia An umbilical hernia develops due to incomplete closure or weakness of the muscular umbilical ring.</p>\n<p><strong>Highyeild:</strong></p><p>The hernia appears as a soft swelling covered by skin that protrudes during crying, coughing, or straining in newborns and can be reduced easily through the fibrous ring at the umbilicus. In newborns, it can appear anytime from birth to 6 months and the majority will heal spontaneously. Rarely do they require surgery. According to some experts, if the umbilical ring size is more than 1.5 cm, the umbilical hernia may not spontaneously close, and may require surgical closure.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "To combat cold, a newborn will generate heat by all of the following mechanisms except:", "options": [{"label": "A", "text": "Increasing body movements", "correct": false}, {"label": "B", "text": "By crying", "correct": false}, {"label": "C", "text": "Sympathetic surge", "correct": false}, {"label": "D", "text": "Shivering", "correct": true}], "correct_answer": "D. Shivering", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Shivering Shivering is not seen in newborns. They produce heat principally by the mechanism of non-shivering thermogenesis. When exposed to a cold environment, the neonate tries to generate heat by increasing physical activity (crying, increased body movements) and by mounting a sympathetic surge that causes cutaneous vasoconstriction and generates heat by non-shivering thermogenesis in the brown fat.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Brown fat is located in new-borns in all of the following regions except:", "options": [{"label": "A", "text": "Axilla", "correct": false}, {"label": "B", "text": "Nape of neck", "correct": false}, {"label": "C", "text": "Perineal region", "correct": false}, {"label": "D", "text": "Abdominal wall", "correct": true}], "correct_answer": "D. Abdominal wall", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Abdominal wall Brown fat is richly vascularized, sympathetically innervated fat collections located in the axillae, groin, and nape of the neck, interscapular area and perineal area. It is not located in the abdominal wall.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are responses to hypothermia in a newborn except:", "options": [{"label": "A", "text": "Hyperglycemia", "correct": true}, {"label": "B", "text": "Lactic acidosis", "correct": false}, {"label": "C", "text": "Hypoxemia", "correct": false}, {"label": "D", "text": "Bradycardia", "correct": false}], "correct_answer": "A. Hyperglycemia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hyperglycemia Hypothermia-induced peripheral vasoconstriction in new-borns leads to increased metabolism with excess oxygen consumption and glucose utilisation Switch to anaerobic metabolism in hypothermia leads to metabolic acidosis</p>\n<p><strong>Highyeild:</strong></p><p>Metabolic acidosis induces pulmonary vasoconstriction and pulmonary hypertension further worsens hypoxemia The occurrence of hypoxemia, bradycardia, hypoglycemia and metabolic acidosis as a result of hypothermia contribute towards increased mortality.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The key components of Kangaroo mother care KMC include all of the following except:", "options": [{"label": "A", "text": "Early initiation of breastfeeding", "correct": false}, {"label": "B", "text": "Started early after birth and given continuously", "correct": false}, {"label": "C", "text": "Early discharge from health facility to home", "correct": false}, {"label": "D", "text": "Decrease mortality", "correct": true}], "correct_answer": "D. Decrease mortality", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Decrease mortality The key features of KMC include:</p>\n<p><strong>Highyeild:</strong></p><p>The key features of KMC include : Started early after birth and ideally provided continuously and for a prolonged period Exclusive breastfeeding and skin-to-skin contact Initiated in the birthing facility /hospital, the baby is discharged early and the KMC continued at home</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "According to the current mandate, low birth weight babies are those whose birth weight is less than?", "options": [{"label": "A", "text": "3.5 kg", "correct": false}, {"label": "B", "text": "3 kg", "correct": false}, {"label": "C", "text": "2.5 kg", "correct": true}, {"label": "D", "text": "2 kg", "correct": false}], "correct_answer": "C. 2.5 kg", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2.5 kg Low birth weight is defined as a birth weight of less than 2.5 kg Very low birth weight is defined as a birth weight of less than 1.5 kg Extremely low birth weight is defined as a birth weight of less than 1 kg LBW can be due to prematurity or Intrauterine Growth Restriction IUGR</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 33-week male baby was born by Normal vaginal delivery. The child will be considered?", "options": [{"label": "A", "text": "Early preterm", "correct": false}, {"label": "B", "text": "Moderate preterm", "correct": true}, {"label": "C", "text": "Late preterm", "correct": false}, {"label": "D", "text": "Extreme preterm", "correct": false}], "correct_answer": "B. Moderate preterm", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Moderate preterm Preterm birth is defined as a live birth occurring before the 37th week of gestation Subcategories of preterm birth: Late preterm (35-36 wk) Moderate preterm (32-34 wk), and Early preterm (&lt; 32 wk) Extreme preterms (&lt; 28 wk)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Extreme premature babies are those who are born at a gestation less than?", "options": [{"label": "A", "text": "28 weeks", "correct": true}, {"label": "B", "text": "26 weeks", "correct": false}, {"label": "C", "text": "24 weeks", "correct": false}, {"label": "D", "text": "30 weeks", "correct": false}], "correct_answer": "A. 28 weeks", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>28 weeks Preterm birth is defined as a live birth occurring before the 37th week of gestation Subcategories of preterm birth: Late preterm (35-36 wk) Moderate preterm (32-34 wk), and Early preterm (&lt; 32 wk) Extreme preterms (&lt; 28 wk)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "As a pediatric intern, you are assessing the one-minute APGAR score for a newborn. Baby appears pink in colour all over and has a pulse rate of 131. As you dry her off he begins to cry vigorously and kick his legs with grimacing. His \"Appearance, Pulse, Grimace, Activity, and Respiration(APGAR) score would be ?", "options": [{"label": "A", "text": "8", "correct": false}, {"label": "B", "text": "9", "correct": true}, {"label": "C", "text": "10", "correct": false}, {"label": "D", "text": "7", "correct": false}], "correct_answer": "B. 9", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>9 APGAR score is an objective method of evaluating newborns' condition, it is performed at 1 minute and again at 5 minutes after birth. However, resuscitation must be initiated before a 1-minute score is assigned. Therefore, the \"Appearance, Pulse, Grimace, Activity, and Respiration (APGAR) score is not used to guide the resuscitation. Its components include as the given table below Apgar score Sign 0 1 2 Heart rate Absent Slow (&lt;100 beats/min) Normal (&gt;100 beats/min) Respiration Absent Weak cry Good strong cry Muscle tone Limp Some flexion Active movements Reflex imitability No response Grimace Cough or sneeze Color Blue or pale Body pink, extreme ties blue Completely pink</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A full-term baby was born by normal vaginal delivery weighing 3kg. As a paediatric intern, you were asked to do the initial steps of resuscitation to the baby, despite it the baby did not cry at birth. Hence positive predictive value (PPV) with bag and mask ventilation was started. You were asked about the baby's condition by the senior resident. By looking at which of the following indicators you say that the baby is responding to the resuscitation ?", "options": [{"label": "A", "text": "Improvement in oxygen saturation", "correct": false}, {"label": "B", "text": "Cry of the baby", "correct": false}, {"label": "C", "text": "Change in colour", "correct": false}, {"label": "D", "text": "Increase in heart rate", "correct": true}], "correct_answer": "D. Increase in heart rate", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Increase in heart rate Among the given options during resuscitation of the newborn the first/earliest/most sensitive indicator to tell whether the newborn is responding is an increase in heart rate as per the protocols. Also, respiratory efforts and change in the colour of the baby plays an important role in response to resuscitation. Components of resuscitation are summarized as T A B C T- Temperature- provide warmth, dry the baby and remove wet linen. A – Airway- position infant, clear airway if required (by wiping/ suction of baby's mouth and nose). If necessary, endotracheal intubation is inserted to ensure an open airway. B – Breathing – Tactile stimulation to initiate respiration, positive pressure breaths using either bag and mask or ET tube are necessary. C – Circulation- stimulate and maintain the circulation of blood with chest compressions and medications given.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A four-day-old baby boy was delivered vaginally at term in your hospital. He was referred to Neonatal Intensive Care Unit(NICU) 48hrs after delivery when he presented with fever, tachypnea and chest retractions. His birth weight was 2.9kg and he cried immediately after birth. He was soon sent for neonatal sepsis screening. All of the following components are involved in sepsis screening except ?", "options": [{"label": "A", "text": "White blood count(WBC)", "correct": false}, {"label": "B", "text": "C-reactive protein (CRP)", "correct": false}, {"label": "C", "text": "Absolute eosinophil count", "correct": true}, {"label": "D", "text": "Micro ESR(erythrocyte sedimentation rate)", "correct": false}], "correct_answer": "C. Absolute eosinophil count", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Absolute eosinophil count Neonatal sepsis often manifests with vague and Ill-defined symptoms, therefore requiring a high index of suspicion for early diagnosis. A baby who had been active and sucking normally refuses to suck and becomes lethargic and unresponsive. Fast breathing, chest retractions and grunt indicate pneumonia.</p>\n<p><strong>Highyeild:</strong></p><p>No investigation is required to start treatment in a sick baby who has the probability of sepsis. Blood culture provides a definite diagnosis of neonatal sepsis and should be taken before starting antimicrobial therapy. A panel of tests consisting of Total leukocyte count &lt; 5000/mm³ Absolute neutrophil count &lt; 1800/mm³ CRP &gt; 1 mg/dl Micro ESR 15mm or more in 1st hour Immature to total neutrophil ratio &gt; 20% It is considered positive if 2 of these parameters are positive</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term male neonate with a birth weight of 3.1kg was born to a primigravida by spontaneous vaginal delivery. The Antenatal period was uneventful. The paediatrician was notified as the baby had vomited small quantities of brownish-green fluid. He was placed under a radiant warmer, his skin is dried, oropharynx and nose were suctioned. After tactile stimulation, there are minimal respiratory efforts, dusky colour and an HR of 86 beats per minute. Bag and mask ventilation was performed for 30sec at a rate of 40 to 60 breaths/min. Then he was increased upto 100beats/min. Which of the following is the next best step in this case ?", "options": [{"label": "A", "text": "Perform endotracheal intubation immediately", "correct": false}, {"label": "B", "text": "Continue bag and mask ventilation at a rate of 20 to 40 breaths/min", "correct": false}, {"label": "C", "text": "Continue ventilation and begin chest compressions to avoid apnoea", "correct": false}, {"label": "D", "text": "Observe for spontaneous respiration and discontinue ventilation", "correct": true}], "correct_answer": "D. Observe for spontaneous respiration and discontinue ventilation", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Observe for spontaneous respiration and discontinue ventilation A baby born through meconium-stained liquor may aspirate meconium into the trachea and lungs.</p>\n<p><strong>Highyeild:</strong></p><p>If the term baby born through meconium-stained liquor is vigorous (breathing well and good tone) baby is provided initial steps of suctioning of mouth and nose required. If non-vigorous (feeble breathing low tone) baby is provided initial steps under radiant warmer and PPV is provided if required After the initial steps, the baby should be evaluated by assessing respiratory rate, heart rate and colour. If the baby has good breathing, HR 100/min or more and no cyanosis, then no additional intervention is needed, but monitor frequently. If the baby has laboured breathing or persistent central cyanosis, CPAP is administered in preterm babies and supplemental O2 in term babies is recommended. If the baby is apneic, has gasping breathing, and HR &lt; 100/min, then positive pressure ventilation is needed.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Choose the correct options for the choice of initial feeding methods in low birth weight (LBW) infants weight (LBW) infants Select the correct answer from the given below code:", "options": [{"label": "A", "text": "1- A,2-C,3-D,4-B", "correct": false}, {"label": "B", "text": "1-B,2- C,3- D,4- A", "correct": true}, {"label": "C", "text": "1- A,2-B,3-C,4- D", "correct": false}, {"label": "D", "text": "1- A,2-B,3-D,4-C", "correct": false}], "correct_answer": "B. 1-B,2- C,3- D,4- A", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1690959320084-QTDK015023IMG1.JPG", "https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1689444954881-QTDK015023IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1-B,2- C,3- D,4- A 28weeks = no proper sucking effort seen, no propulsive motility of gut; so I.v fluids given 28 to 32weeks= sucking burst develops, no coordination between suck/swallow/ breathe; orogastric or nasogastric tube feeding with occasional spoon/paladai used 32 to 34 weeks = slightly mature sucking pattern, coordination between breathing and swallowing begins; feeding given by spoon/paladai &gt;34weeks = mature sucking pattern and more coordination develops between swallowing and breathing; so breastfeeding is preferred</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A full-term, 2.3kg baby was born through normal vaginal delivery 10mins back. As a pediatric intern, you are supposed to conduct the routine newborn assessment of that baby. On examination, HR 151/min, RR 58/min, and mouth and nose suctioning were done. On the measurement of temperature, it is recorded as 36.5°c. To prevent hypothermia, which of the following measures is usually not done ?", "options": [{"label": "A", "text": "Birthing room should have an ambient temperature of 25°c.", "correct": false}, {"label": "B", "text": "Kangaroo mother care is an effective way to keep low birth weight (LBW) babies warm.", "correct": false}, {"label": "C", "text": "Frequent breastfeeding is not required for babies with low temperatures.", "correct": true}, {"label": "D", "text": "Bathing is to be postponed in sick or low birth weight(LBW) babies until the umbilical cord falls off.", "correct": false}], "correct_answer": "C. Frequent breastfeeding is not required for babies with low temperatures.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Frequent breastfeeding is not required for babies with low temperatures. Based on axillary temperature, disorders can be categorized as follows:</p>\n<p><strong>Highyeild:</strong></p><p>Normal body temperature = 36.5 to 37.5 °c Hypothermia = &lt; 36.5°c Cold stress/ mild hypothermia =36.0 to 36.4°c Moderate hypothermia = 32 to 35.9°c Severe = &lt; 32°c Hyperthermia = &gt; 37.5°c Hypothermia prevention: Birthing room should have an ambient temperature of 25°c. Kangaroo mother care is an effective way to keep LBW babies warm. Frequent breastfeeding is critical to provide energy to keep the baby warm. Bathing and weighing are to be postponed in sick / LBW babies until the umbilical cord falls off. Training/awareness of healthcare providers to be given. Rooming-in is to be done for both babies and mothers.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 31 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 23 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "WHO defines adolescence as the age group between?", "options": [{"label": "A", "text": "6-12 years", "correct": false}, {"label": "B", "text": "10-15 years", "correct": false}, {"label": "C", "text": "10-19 years", "correct": true}, {"label": "D", "text": "12-19 years", "correct": false}], "correct_answer": "C. 10-19 years", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>10-19 years Adolescence is not the same as puberty. Adolescence is the age group from the age of 10 years till 19 years. Puberty is the development of sexual characteristics during adolescent period.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Secondary sexual characters can be both primary as well as secondary sexual characters. Which of the following is a secondary sexual character?", "options": [{"label": "A", "text": "Penile growth in males", "correct": false}, {"label": "B", "text": "Breast development in females", "correct": false}, {"label": "C", "text": "Pubic hairs", "correct": true}, {"label": "D", "text": "Ovarian development in females", "correct": false}], "correct_answer": "C. Pubic hairs", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pubic hairs Primary sexual characters are different from secondary sexual characters.</p>\n<p><strong>Highyeild:</strong></p><p>Primary sexual characters are – penile/testicular growth in males, breast development/uterus/ovarian development in females. They are primarily controlled by testosterone/estrogens Secondary sexual characters – pubic hairs, axillary hairs, facial hairs. They are controlled by adrenal androgens.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following gonadotropin/hormones is deemed possibly the best initial marker of pubertal status?", "options": [{"label": "A", "text": "Follicle stimulating hormone(FSH)", "correct": false}, {"label": "B", "text": "Luteinizing hormone(LH)", "correct": true}, {"label": "C", "text": "Gonadotropin-releasing hormone(GnRH)", "correct": false}, {"label": "D", "text": "Androgens", "correct": false}], "correct_answer": "B. Luteinizing hormone(LH)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Luteinizing hormone(LH) Luteinizing hormone(LH) is a better indicator of pubertal status compared to Follicle stimulating hormone FSH.</p>\n<p><strong>Highyeild:</strong></p><p>GnRH plays an important role in the onset of puberty. Initially, Gonadotropin-releasing hormone GnRH pulses occur only during nights followed by secretion during both day and night. Due to pulsatile nature of its secretions, Gonadotropin-releasing hormone GnRH stimulation test is better marker of evaluation of pubertal disorders compared to baseline GnRH evaluation. This pulsatile Gonadotropin-releasing hormone GnRH secretion stimulates secretion of both Luteinizing hormone LH and Follicle stimulating hormone FSH . Both FSH and LH will further stimulate the secretion of estrogen and testosterone levels. While androgens and its secretions can be good markers to support/confirm pubertal status, they are possibly less valuable markers for initial evaluation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the first evident sign of puberty in females?", "options": [{"label": "A", "text": "Pubarche", "correct": false}, {"label": "B", "text": "Increase in growth velocity", "correct": false}, {"label": "C", "text": "Menarche", "correct": false}, {"label": "D", "text": "Thelarche", "correct": true}], "correct_answer": "D. Thelarche", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Thelarche Puberty occurs in a sequence. 1st visible sign of puberty in girls is breast enlargement, also known as thelarche. Thelarche --&gt; Pubarche (pubic hair) --&gt; increase in growth velocity(growth spurt) --&gt; menarche</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In an adolescent girl growth spurt occurs before which phase of puberty?", "options": [{"label": "A", "text": "Thelarche", "correct": false}, {"label": "B", "text": "Menarche", "correct": true}, {"label": "C", "text": "Pubarche", "correct": false}, {"label": "D", "text": "Adrenarche", "correct": false}], "correct_answer": "B. Menarche", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Menarche Growth spurt is the increase in growth velocity which usually occurs before menarche and after pubarche in girls. Thelarche Pubarche (pubic hair) --&gt; increase in growth velocity(growth spurt) --&gt; menarche.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the first sign of puberty in males?", "options": [{"label": "A", "text": "Growth spurt", "correct": false}, {"label": "B", "text": "Facial hairs", "correct": false}, {"label": "C", "text": "Penile enlargement", "correct": false}, {"label": "D", "text": "Testicular enlargement", "correct": true}], "correct_answer": "D. Testicular enlargement", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Testicular enlargement In boys, puberty starts with testicular enlargement at 11.5 years (range 9to14 years). Testis volume &gt;4ml marks the onset of puberty.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Order of development of secondary sexual characteristic in male is", "options": [{"label": "A", "text": "Testicular development-pubic hair-growth spurt-facial hair", "correct": true}, {"label": "B", "text": "Pubic hair- growth spurt-testicular development -facial hair", "correct": false}, {"label": "C", "text": "Testicular development -growth spurt-pubic hair-facial hair", "correct": false}, {"label": "D", "text": "Facial hair- pubic hair-testicular development-growth spurt", "correct": false}], "correct_answer": "A. Testicular development-pubic hair-growth spurt-facial hair", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Testicular development-pubic hair-growth spurt-facial hair Growth of the testis (&gt;4ml in volume) and thinning of scrotum – 1st sign of puberty Followed by Pubarche. Growth spurt occurs in genital stage IV, and it occurs 2 years later than females. Facial hairs and spermarche are the last visible signs of puberty in males</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is used to measure testicular volume in males?", "options": [{"label": "A", "text": "Orchidometer", "correct": true}, {"label": "B", "text": "Metric scale", "correct": false}, {"label": "C", "text": "Shakir’s tape", "correct": false}, {"label": "D", "text": "Orchidometry", "correct": false}], "correct_answer": "A. Orchidometer", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Orchidometer Orchidometer is an instrument to measure the testicular volume. Shakir’s tape is used to measure mid upper arm circumference. Orchidometry- method of measuring testicular volume using orchidometer.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "At what sexual maturity rating (SMR) stage does growth spurt starts in females?", "options": [{"label": "A", "text": "Stage 2", "correct": false}, {"label": "B", "text": "Stage 3", "correct": true}, {"label": "C", "text": "Stage 4", "correct": false}, {"label": "D", "text": "Stage 5", "correct": false}], "correct_answer": "B. Stage 3", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Stage 3 Maximum growth spurt occurs during early puberty in girls (tanner II-III) compared to boys where it occurs later (tanner III-IV) .</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "At what SMR stage does growth spurt starts in males?", "options": [{"label": "A", "text": "Stage 2", "correct": false}, {"label": "B", "text": "Stage 3", "correct": false}, {"label": "C", "text": "Stage 4", "correct": true}, {"label": "D", "text": "Stage 5", "correct": false}], "correct_answer": "C. Stage 4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Stage 4 Maximum growth spurt occurs during late puberty in boys (tanner III-IV). Which occurs after pubarche.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A newborn is noted to have a large head and short limbs. On further examination ,short broad fingers, small face, and a low normal length are noted. The trunk appears long and narrow, to confirm the diagnosis you should?", "options": [{"label": "A", "text": "Order an ophthalmic examination", "correct": false}, {"label": "B", "text": "Obtain skeletal radiographs", "correct": true}, {"label": "C", "text": "Order chromosome analysis", "correct": false}, {"label": "D", "text": "Examine the parents", "correct": false}], "correct_answer": "B. Obtain skeletal radiographs", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Obtain skeletal radiographs The given description suggests a diagnosis of achondroplasia ; skeletal x-rays will help in diagnosing it.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant can sit while leaning forward on his hands . He bounces actively when made to stand. He laughs aloud and becomes concerned when the mother moves away. What is his most likely age?", "options": [{"label": "A", "text": "12 weeks", "correct": false}, {"label": "B", "text": "16 weeks", "correct": false}, {"label": "C", "text": "22 weeks", "correct": false}, {"label": "D", "text": "28 weeks", "correct": true}], "correct_answer": "D. 28 weeks", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>28 weeks Key social and adaptive milestones Age Milestone 2m Social smile 3m Recognizes mother 6m Recognizes strangers, stranger anxiety 9m Waves \"bye bye\" 12m Comes when called, plays simple ball game 15m Jargon 18m Copies parents in tasks 2yr Asks for food, drink, toilet 3yr Shares toys, knows full name and gender 4yr Plays cooperatively in a group, goes to toilet alone 5yr Helps in household tasks, dressing and undressing</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In children having mild vit k deficiency ,prothrombin time may be normal and the estimation of protein induced in vit k absence( pivka) is useful to detect early vit k deficiency. What is the exact form of pivka?", "options": [{"label": "A", "text": "Undercarboxylated factor 7", "correct": false}, {"label": "B", "text": "Undercarboxylated factor 2", "correct": true}, {"label": "C", "text": "Carboxylated factor 7", "correct": false}, {"label": "D", "text": "Carboxylated factor 2", "correct": false}], "correct_answer": "B. Undercarboxylated factor 2", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Undercarboxylated factor 2 In mild vitamin k deficiency, PT is normal, but there are elevated levels of undercarboxylated forms of proteins induced by vit k absence (pivka). That are carboxylated normally in the presence of vit k Measurement of undercarboxylated factor 2 can be used to detect mild vit k deficiency Determination of blood vit k level is less useful because of the significant variation based on recent dietary intake and levels do not reflect real tissue stores.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4 year old child with failure to thrive ,metabolic acidosis with increased anion gap. Not true regarding the differential diagnosis?", "options": [{"label": "A", "text": "Insulin dependent diabetes mellitus", "correct": false}, {"label": "B", "text": "Chronic renal failure", "correct": false}, {"label": "C", "text": "Renal tubular acidosis", "correct": true}, {"label": "D", "text": "Inborn errors of metabolism", "correct": false}], "correct_answer": "C. Renal tubular acidosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Renal tubular acidosis Normal anion gap (hyperchloremic acidosis) Renal loss of bicarbonate Proximal (type 2) renal tubular acidosis. Carbonic anhydrase inhibitors (e.g. acetazolamide), Tubular damage due to drugs or toxins Gastrointestinal bicarbonate loss Diarrhea, Ureteral sigmoidostomy, rectourethral fistula, fistula or drainage of small bowel or pancreas Decreased renal hydrogen ion excretion Renal tubular acidosis type 1 and type 4 (aldosterone deficiency) Potassium sparing diuretics. Increased hydrogen chloride production. Parenteral alimentation, increased catabolism of lysine and arginine Ammonium chloride ingestion Elevated anion gap. Increased acid production/accumulation: Sepsis, shock, poisonings (ethanol methanol ethylene glycol); inborn errors of metabolism. Ketoacidosis: Diabetic ketoacidosis, starvation. Exogenous acids: Salicylates, iron, isoniazid, paraldehyde.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5 year old boy passed 18 loose stools in the last 24 hours and vomited twice in the last 4 hours, he is irritable but drinking fluids. The optimal therapy for this child is?", "options": [{"label": "A", "text": "IV fluids", "correct": false}, {"label": "B", "text": "Oral rehydration solution(ORS)", "correct": true}, {"label": "C", "text": "Intravenous fluids initially for 4 hours followed by oral fluids", "correct": false}, {"label": "D", "text": "Plain water", "correct": false}], "correct_answer": "B. Oral rehydration solution(ORS)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Oral rehydration solution(ORS) According to question the boy is under some dehydration as he is drinking fluids orally but is irritable. Optimal therapy for this child would be plan B ( that is by ORS). Plan B is as follows Daily requirement: If weight&lt;10 kg - 100ml/kg ors should be given in a day If weight 10-20 kg - 1000ml+ 50ml/kg If weight &gt; 20 kg - 1500 ml+ 20 ml/kg For correction: 75ml/kg over 4 hours For maintainance- 10ml/kg after each loose stool</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3yr old boy presented to OPD with slight fever and sore throat for 2 days. No other abnormality was detected. He attained all the developmental milestones at his age. No other significant medical history. On examination, PR and RR were normal. According to his age, which of the following is the normal upper segment and lower segment ratio?", "options": [{"label": "A", "text": "1.1", "correct": false}, {"label": "B", "text": "1.3", "correct": true}, {"label": "C", "text": "1.2", "correct": false}, {"label": "D", "text": "1.7", "correct": false}], "correct_answer": "B. 1.3", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1.3 Upper segment can be measured by taking the sitting height of the child. Child is made to sit on a stool placer against the vertical rod of the stadiometer.</p>\n<p><strong>Highyeild:</strong></p><p>The headboard is brought down to the vertex similarly as for taking height. The height of the stool is subtracted from the reading obtained to get sitting height. Lower Segment (LS) can be obtained by subtracting Upper segment (US) from the height. For measuring arm span, child is asked to stand straight with both arms extended outwards parallel to the ground. Length between the tips of the middle finger of the outstretched hand in the arm span. Normally, US:LS ratio is 1.7 at birth, 1.3 at 3yrs, 1.1 by 6yrs, 1 by 10yrs of age and 0.9 in adults Arm span is shorter than length by 2.5cm at birth, equals height at 11yrs and thereafter is slightly greater than height.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 13 yr old girl was brought to the emergency due to a fall from height while playing in the school. On examination she was found to have a calcaneum fracture. To know the ossification of bone, the doctor wants to assess the skeletal maturity for this 13yr old girl. Which of the following sites is used to take X Ray to know the skeletal maturity?", "options": [{"label": "A", "text": "Wrist", "correct": true}, {"label": "B", "text": "Shoulder", "correct": false}, {"label": "C", "text": "Ankle", "correct": false}, {"label": "D", "text": "Knee", "correct": false}], "correct_answer": "A. Wrist", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Wrist Skeletal maturation assessment is done by noting the appearance and fusion of epiphysis at the ends of long bones. This occurs about 18yrs in girls and 20 to 22yrs in boys. The degree of skeletal maturity closely correlates with sexual maturity To determine skeletal age : Statement A. In neonates – x ray of knees Statement B. In infants (– 3 to 9 months of age) – Xray shoulder Statement C. Children between 1 to 13yrs age – Xray hand and wrist Statement D. For children between 12 to 14yrs – Xray of elbow and hip</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 8yr old male child who is presented to OPD by his mother with chief complaints of bed wetting twice a week. His mother is worried since his other 2 siblings were all toilet trained by his age. There is no history of dysuria, polyuria, or polydipsia. His child development was normal. Past medical history is unremarkable. Which of the following is used as the best treatment option for this child?", "options": [{"label": "A", "text": "Oral desmopressin", "correct": false}, {"label": "B", "text": "Conditioning therapy", "correct": true}, {"label": "C", "text": "Nasal decompression", "correct": false}, {"label": "D", "text": "Oxybutynin", "correct": false}], "correct_answer": "B. Conditioning therapy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Conditioning therapy Enuresis: Near complete evacuation of bladder at wrong place and time at least twice a month ,after 5yrs of age. 75% enuresis – nocturnal – due to behavioral problems . 25%enuresis- day and night – due to UTI. More commonly seen in boys than girls. First line of treatment: motivational therapy and alarm therapy. Most successful therapy is alarm therapy or conditioning therapy used after 7yrs of age Oral desmopressin 0.2 to 0.6 mg 2hrs before sleep Cardiac arrhythmias are a rare but serious adverse event effect of tricyclic antidepressants, which are therefore not recommended. Other medications used are anticholinergics like oxybutynin, tolterodine.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1.5yr old baby boy presented with recurrent episodes of excessive crying at full expiration followed by cyanosis and unconsciousness. He used to have occasional seizures from 9months of age. Which of the following statements is/are true to the above condition?", "options": [{"label": "A", "text": "These are breath holding spells and parents are advised to ignore and not to reinforce these attacks.", "correct": true}, {"label": "B", "text": "It must be immediately attended to prevent hypoxia and onset of seizures.", "correct": false}, {"label": "C", "text": "It is a vasovagal attack and needs to be treated accordingly.", "correct": false}, {"label": "D", "text": "Anoxic spells need to be treated or chances of recurrence are high.", "correct": false}], "correct_answer": "A. These are breath holding spells and parents are advised to ignore and not to reinforce these attacks.", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884089272-QTDK038022IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>These are breath holding spells and parents are advised to ignore and not to reinforce these attacks. Breath holding spells, parents are advised to ignore and to reinforce these attacks. Breath holding spells are reflex events typically initiated by provocation that causes anger, frustration, pain making the child cry.</p>\n<p><strong>Highyeild:</strong></p><p>The cry stops at full expiration , the child becomes apneic and cyanotic or pale. In some cases, the child may become unconscious and hypotonic. In prolonged events, brief tonic clonic movements may happen. It is rare before 6 months of age ,peaks at 2yrs and abates by 5yrs age. Essential component of management is parental reassurance. Family should be advised to be consistent in handling the child, or remain calm during the event.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. In cerebral hypoxia or HIE, which is caused by deprivation or limited blood flow to brain at near the time of birth. They occur 12 to 24hrs after birth. They are the most common cause of seizures in neonates. Option C. Vasovagal attacks are brief loss of consciousness due to neurologically induced drop in blood pressure or heart rate Option D. Anoxic spells are paroxysmal attacks of dyspnea in children with congenital heart disease with cyanosis most frequently in tetralogy of Fallot . Attack is due to right ventricular outflow obstruction</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 8yr old boy was brought to pediatric OPD for not gaining weight since 2yrs. He feels lethargic, not able to concentrate nor willing to play activities at school. Mother is very much concerned about his weight gain so she consulted a nutritional specialist also. Calculate the weight of the boy which should be normal at this particular age?", "options": [{"label": "A", "text": "22kg", "correct": false}, {"label": "B", "text": "26kg", "correct": true}, {"label": "C", "text": "30kg", "correct": false}, {"label": "D", "text": "35kg", "correct": false}], "correct_answer": "B. 26kg", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>26kg Term neonates may lose up to 10% of their birth weight in the 1st few days of life (due to extracellular fluids). Most healthy newborns typically regain their birth weight by 10 to 14 days. Thereafter approximately daily weight gain is as follows: 0 to 3 months- 30g/day 3 to 6 months- 20g/day 6 to 12 months – 12 to 15g/day Weight gain with respect to birth weight: 5 Months - 2 times birth weight 1yr – 3 times birth weight 2yrs - 4 times birth weight 3yrs - 5times birth weight Formula for calculating the weight in children : 3 to 12 months age , wt= age( months) +9/ 2 1 to 6 yrs age , Wt= 2 ×age ( yrs) + 8 7 to 12 yrs age, Wt= 7 × age (yrs) -5 / 2</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Priya, 16yr old girl, was brought to the clinic by her mother. Mother is worried as her daughter has not attained menarche. She has no past medical history. She is also active in sports and enjoys playing with her friends. On examination, breast buds were present with scanty pubic hair. According to the tanner's staging, it belongs to which stage?", "options": [{"label": "A", "text": "Stage 1", "correct": false}, {"label": "B", "text": "Stage 2", "correct": true}, {"label": "C", "text": "Stage 3", "correct": false}, {"label": "D", "text": "Stage 4", "correct": false}], "correct_answer": "B. Stage 2", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Stage 2 Puberty in girls starts with breast development (the larche) between 8 to 13yrs age. This then followed by appearance of pubic hair (pubarche) and then menstruation (menarche occurring at an average of 12.6yrs( range 10 to 16yrs) Experts now believe the age of menarche in advancing to 9yrs in many populations 4.</p>\n<p><strong>Highyeild:</strong></p><p>Breast buds are be tender and may be asymmetric in breast size during early phases of puberty. Menarche usually occurs after 2 to 2.5yrs if thelarche. 5. Here in this question it belongs to sexual maturity scale , stage 2 as presence of breast bud and scant pubic hair belongs to stage 2</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10yr child was brought for tetanus vaccinations to the clinic. Usual anthropometric studies were done to this child. His weight was according to his age . Other vital parameters are upto the range including the blood reports. Upon calculating his upper limb and lower limb length were 90cm and 45cm respectively. Which of the following conditions are included under this category except?", "options": [{"label": "A", "text": "Achondroplasia", "correct": false}, {"label": "B", "text": "Rickets", "correct": false}, {"label": "C", "text": "Turner syndrome", "correct": false}, {"label": "D", "text": "Marfan syndrome", "correct": true}], "correct_answer": "D. Marfan syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Marfan syndrome Upper segment can be measured by taking the sitting height of the child.</p>\n<p><strong>Highyeild:</strong></p><p>Child is made to sit on a stool placed against the vertical rod of the stadiometer. Headboard is brought down to the vertex similarly as for taking height. Height of the stool is subtracted from reading obtained to get sitting height. LS can be obtained by subtracting US from height Normal US: LS ratio is 1.7 at birth, 1.3 at 3yrs, 1.1 by 6yrs, 1 by 10yrs and 0.9 in adults US: LS ratio increased in: untreated congenital hypothyroidism, rickets, Turner’s syndrome, achondroplasia US: LS ratio decreased in : vertebral anomalies like hemivertebrae and butterfly vertebra spondyloepiphyseal dysplasia, mucopolysaccharidoses, TB spine (pott's spine) Arm span &gt;&gt; height seen in mardan syndrome and homocystinuria (called as dolichostenomelia)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Choose the incorrect option regarding the eye coordination achieved in infants?", "options": [{"label": "A", "text": "At 2 to 3 months , follows with steady movements of eyes", "correct": false}, {"label": "B", "text": "At 4weeks regard torch/ red ring kept at 20cm in front", "correct": false}, {"label": "C", "text": "Binocular vision obtained by 7 to 8months", "correct": true}, {"label": "D", "text": "At 6weeks follows object from side to side unsteadily", "correct": false}], "correct_answer": "C. Binocular vision obtained by 7 to 8months", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Binocular vision obtained by 7 to 8months FINE MOTOR AND ADAPTIVE MILESTONES</p>\n<p><strong>Highyeild:</strong></p><p>Includes eye coordination, hand eye coordination, hand mouth coordination manipulation with fingers. Equipment for development assessment: tested with red ring, pen torch ,red cubes(2.5cm), pellet, red pencil / crayon , paper, wooden blocks Eye coordination: 4weeks = regards torch/red ring kept at 20cm in front 6weeks= follows object from side to side unsteadily 2 to 3momths= follows with steady movement of eyes Binocular vision begins at 6weeks and is well established by 4months</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 33 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 22 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "After birth growth velocity is fastest in which age group?", "options": [{"label": "A", "text": "0-1 year", "correct": true}, {"label": "B", "text": "2-5 year", "correct": false}, {"label": "C", "text": "6-10 years", "correct": false}, {"label": "D", "text": "10-15 years", "correct": false}], "correct_answer": "A. 0-1 year", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>0-1 year Intrauterine growth is the most rapid growth period</p>\n<p><strong>Highyeild:</strong></p><p>The fetus grows fast in the first half of Thereafter, the rate of growth slows down until the baby is born. After rapid growth in infancy, growth slows down , and again second accelerated growth is seen in puberty. The general body growth is rapid during fetal life , the first one or two years of postnatal life, and also during puberty. Growth in infancy is much faster than pubertal growth.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are true regarding laws of growth except", "options": [{"label": "A", "text": "Occurs in the cephalocaudal direction", "correct": false}, {"label": "B", "text": "Proximal to distal", "correct": true}, {"label": "C", "text": "Fastest growth occurs in intrauterine life", "correct": false}, {"label": "D", "text": "After birth growth is fastest in infancy.", "correct": false}], "correct_answer": "B. Proximal to distal", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Proximal to distal The growth and development of children is a continuous and orderly process</p>\n<p><strong>Highyeild:</strong></p><p>The order of growth is cephalocaudal and distal to proximal, not proximal to distal body growth is rapid during the fetal life and the first one or two years of postnatal life. Body growth is rapid during fetal life and during the first one or two years of postnatal life. A second acceleration of growth occurs in puberty.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is an age-independent marker of growth assessment?", "options": [{"label": "A", "text": "Height", "correct": false}, {"label": "B", "text": "Weight", "correct": false}, {"label": "C", "text": "Head circumference", "correct": false}, {"label": "D", "text": "Mid-upper arm circumference", "correct": true}], "correct_answer": "D. Mid-upper arm circumference", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Mid-upper arm circumference Growth assessment markers are Age-dependent – weight, height, head circumference Age independent- mid-upper arm circumference MUAC does not require age for an evaluation. According to most widely accepted norms, MAC &gt;13.5 cm is considered normal in all children between 6 months to 5 years of age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is the most common site of measurement of skin fold thickness to assess the nutritional status of a child?", "options": [{"label": "A", "text": "Biceps", "correct": false}, {"label": "B", "text": "Triceps", "correct": true}, {"label": "C", "text": "Quadriceps", "correct": false}, {"label": "D", "text": "Deltoid", "correct": false}], "correct_answer": "B. Triceps", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Triceps The skin fold thickness is usually measured at the triceps . This gives an indication of the subcutaneous fat and indirect calorie reserve in the body. It is an age-independent growth assessment marker It is measured with Harpenden calipers.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Name the instrument used to measure skin fold thickness in a child.", "options": [{"label": "A", "text": "Shakir’s tape", "correct": false}, {"label": "B", "text": "Quaker Arm Circumference QUAC stick", "correct": false}, {"label": "C", "text": "Harpenden’s caliper", "correct": true}, {"label": "D", "text": "Inch measurement tape", "correct": false}], "correct_answer": "C. Harpenden’s caliper", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Harpenden’s caliper The skin fold thickness is usually measured at the triceps using Harpenden’s caliper Shakir’s tape and QUAC stick are used to measure MUAC.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "At what age after birth, a child attains a weight double the birth weight?", "options": [{"label": "A", "text": "2 months", "correct": false}, {"label": "B", "text": "5 months", "correct": true}, {"label": "C", "text": "6 months", "correct": false}, {"label": "D", "text": "9 months", "correct": false}], "correct_answer": "B. 5 months", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>5 months An infant usually doubles his birth weight by the age of 5 months. The birth weight triples at 1 year and is four times at 2 years of age. 5 times by 3 years, 6 times by 5 years, and 10 times by 10 years</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term baby was delivered by LSCS with a birth weight of 3.5kgs, at what age this child should attain 14 kg weight?", "options": [{"label": "A", "text": "1 year", "correct": false}, {"label": "B", "text": "2 years", "correct": true}, {"label": "C", "text": "3 years", "correct": false}, {"label": "D", "text": "5 years", "correct": false}], "correct_answer": "B. 2 years", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2 years BIRTH WEIGHT IS 3.5 KG 14 kgs are 4 times the birth weight A child achieves 4 times its birth weight in 2 years. An infant usually doubles his birth weight by the age of 5 months. The birth weight triples at 1 year and is four times at 2 years of age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term baby was born by NVD with a birth weight of 3 kg, length- 50cm, and HC – 35cm. What should be the approximate length of this child at 4 years of age to consider his growth as normal?", "options": [{"label": "A", "text": "75 cm", "correct": false}, {"label": "B", "text": "85 cm", "correct": false}, {"label": "C", "text": "90 cm", "correct": false}, {"label": "D", "text": "100 cm", "correct": true}], "correct_answer": "D. 100 cm", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>100 cm The infant measures approximately 50 cm at birth, 60 cm at 3 months, 65 cm at 6 months 70 cm at 9 months, 75 cm at 1 year, 85-90 cm at 2 years, and 100 cm at 4 years After 2 years of age, the child gains about 6 cm in height every year (height velocity) until the age of 12 years.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the average height velocity in children between 2-12 years?", "options": [{"label": "A", "text": "4cm/year", "correct": false}, {"label": "B", "text": "6cm/year", "correct": true}, {"label": "C", "text": "8cm/year", "correct": false}, {"label": "D", "text": "10cm/year", "correct": false}], "correct_answer": "B. 6cm/year", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>6cm/year The child gains about 6 cm in height every year between 2 to 12 years of age. During the pubertal growth spurt, a gain of length in females – is 8cm/year, and in males – 10 cm/year.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following instrument can be used to measure the length of an infant?", "options": [{"label": "A", "text": "Stadiometer", "correct": false}, {"label": "B", "text": "Infantometer", "correct": true}, {"label": "C", "text": "Inch measurement tape", "correct": false}, {"label": "D", "text": "Metric scale", "correct": false}], "correct_answer": "B. Infantometer", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Infantometer INFANTOMETER- used to measure the length in children &lt; 2 years. Stadiometer- used to measure standing height after 2 years.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Length of a child at birth is what percentage of the length at 4 years of age?", "options": [{"label": "A", "text": "25%", "correct": false}, {"label": "B", "text": "35%", "correct": false}, {"label": "C", "text": "50%", "correct": true}, {"label": "D", "text": "75%", "correct": false}], "correct_answer": "C. 50%", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>50% The average length of a child at birth- is 50 cm, and it becomes 100 cm at 4 years of age. Hence, the length of a child at birth is 50% of the length at 4 years of age. Length triples at 13 years of age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-day-old newborn baby is evaluated for pre-discharge examination. On his anthropometric examination, his head circumference is 35cm. What will be the head circumference of this baby at 12 months of age?", "options": [{"label": "A", "text": "42 cm", "correct": false}, {"label": "B", "text": "47 cm", "correct": true}, {"label": "C", "text": "50 cm", "correct": false}, {"label": "D", "text": "44 cm", "correct": false}], "correct_answer": "B. 47 cm", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>47 cm Head circumference increases approximately 12 cm in the first year 2 cm per month for the first 3 months 1 cm per month between 3 and 6 months, and 0.5 cm per month from 6 months to 12 months of age In this baby, 1st 3 months = 2+2+2 = 6 cm 3 mon- 6 months= 1+1+1= 3cm 6 mon – 12 months= 0.5x6 = 3cm Total in 1 year= 6+3+3=12cm increase in head circumference from birth. Hence, his head circumference should be 35+12= 47cm at 12 months of age. Head circumference values in a normally growing healthy child Birth average- 34-35 cm 3 months- 40 cm 6 month-43cm 1 year- 46-47cm</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "When does the chest circumference equal the head circumference?", "options": [{"label": "A", "text": "At birth", "correct": false}, {"label": "B", "text": "6 months", "correct": false}, {"label": "C", "text": "12 months", "correct": true}, {"label": "D", "text": "15 months", "correct": false}], "correct_answer": "C. 12 months", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>12 months The circumference of the chest is about 3 cm less than the head circumference at birth The circumference of the head and chest are almost equal by the age of 1 year (9 months to 1 year). Thereafter, the chest circumference exceeds the head circumference.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Head circumference more than what standard deviation is called macrocephaly?", "options": [{"label": "A", "text": "1 Standard deviation (SD)", "correct": false}, {"label": "B", "text": "2 Standard deviations (SD)", "correct": true}, {"label": "C", "text": "3 Standard deviations (SD)", "correct": false}, {"label": "D", "text": "5 standard deviations(SD)", "correct": false}], "correct_answer": "B. 2 Standard deviations (SD)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2 Standard deviations (SD) Macrocephaly is defined as an occipitofrontal circumference greater than two standard deviations (SD) above the mean for age and sex.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5 months infant is brought with parents' concerns of progressively increasing head size and 2 episodes of seizures in the last 48 hours. On Examination Head circumference of the child is 44 cm and the transillumination test is positive. On seeing the previous records, the head circumference at birth was 35cm. An MRI brain is planned with the Image shown below. What is the likely diagnosis?", "options": [{"label": "A", "text": "Hydrocephalus", "correct": false}, {"label": "B", "text": "Porencephaly", "correct": false}, {"label": "C", "text": "Hydranencephaly", "correct": true}, {"label": "D", "text": "Megalencephaly", "correct": false}], "correct_answer": "C. Hydranencephaly", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1713510332711-888.jpg"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hydranencephaly In this childbirth, HC is 35 cm, and in 5 months, an increase of 9 cm has been noticed in the head circumference</p>\n<p><strong>Highyeild:</strong></p><p>MRI shows- cerebral hemispheres absent (atrophy) and replaced by two large sacs in the frontal part of the brain. Midbrain and brainstem appear to be normal, which favors the diagnosis of hydranencephaly In hydrocephalus, a large head is due to dilated ventricles with or without increased CerebroSpinal Fluid CSF pressure</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 9-year-old male child brought complaints of poor school performance, being in his world, and speech delay. O/E child has a large head, large ears, a long narrow face, and no eye contact. Head circumference is more than 3SD for a 5-year-old. Height and weight appropriate for age. Other systemic examinations appear normal. There are no neurological deficits. Testis appears larger, as measured by an orchidometer. An IQ assessment was performed, which showed an IQ of 55. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Sotos syndrome", "correct": false}, {"label": "B", "text": "Down’s syndrome", "correct": false}, {"label": "C", "text": "Fragile X syndrome", "correct": true}, {"label": "D", "text": "Alexander’s disease", "correct": false}], "correct_answer": "C. Fragile X syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Fragile X syndrome This a male child having macrocephaly, autism features, and intellectual disability with Macroorchidism which favors the diagnosis of Fragile X syndrome .</p>\n<p><strong>Highyeild:</strong></p><p>It is the most common inherited cause of intellectual disability and overall 2nd most common cause of intellectual disability. Macrocephaly with normal height and weight rule out Soto’s syndrome. Soto’s syndrome is an overgrowth syndrome where all height weight and head circumference will be increased. Alexander’s disease will be associated with white matter degeneration and central nervous system CNS problems.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Microcephaly is defined as a head circumference more than what SD below the mean for age, sex, and race.", "options": [{"label": "A", "text": "2 standard deviations (SD)", "correct": false}, {"label": "B", "text": "3 Standard deviations (SD)", "correct": true}, {"label": "C", "text": "1 Standard deviations (SD)", "correct": false}, {"label": "D", "text": "10 standard deviations (SD)", "correct": false}], "correct_answer": "B. 3 Standard deviations (SD)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>3 Standard deviations (SD) Microcephaly is defined as occipitofrontal circumference more than 3 SD below the mean for age, sex, and race Can be primary or secondary Isolated microcephaly- Autosomal recessive, autosomal dominant, or X-linked Syndromic- Trisomy 21, 18, 13, Monosomy 1 p36 deletion, William syndrome, Cri-du-chat, Seckel, Smith-Lemli-Opitz, Cornelia de Lange, Rubinstein-Taybi, Cockayne Structural diseases- Neural tube defects (anencephaly), holoprosencephaly, lissencephaly, schizencephaly, polymicrogyria Fetal alcohol syndrome, fetal hydantoin syndrome Radiations Endocrine- Hypothyroidism, hypopituitarism, adrenal insufficiency</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Name the instrument shown in the image below", "options": [{"label": "A", "text": "Harpenden’s caliper", "correct": false}, {"label": "B", "text": "Orchidometer", "correct": false}, {"label": "C", "text": "Shakir’s tape", "correct": true}, {"label": "D", "text": "QUAC stick", "correct": false}], "correct_answer": "C. Shakir’s tape", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884120503-QTDK039019IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Shakir’s tape This is Shakir’s tape used to measure MUAC in the community setting. This is a plastic tape with colored zones, green, yellow, and red representing different severities of malnutrition</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are criteria for severe acute malnutrition (SAM) except", "options": [{"label": "A", "text": "Weight for height &lt; -3SD", "correct": false}, {"label": "B", "text": "Weight for age &lt; -2SD", "correct": true}, {"label": "C", "text": "Presence of bipedal edema", "correct": false}, {"label": "D", "text": "MUAC &lt; 11.5cm", "correct": false}], "correct_answer": "B. Weight for age < -2SD", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Weight for age &lt; -2SD Weight for age &lt; -2SD is called underweight.</p>\n<p><strong>Highyeild:</strong></p><p>Severe acute malnutrition (SAM) among children 6-59 months of age is defined by WHO as any of the following three criteria: Weight-for-height below -3 standard deviation Presence of bilateral pedal edema; or Mid-upper arm circumference (MUAC) below 11.5 cm.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The growth assessment parameter that changes little between 1-5 years of age is", "options": [{"label": "A", "text": "Height", "correct": false}, {"label": "B", "text": "Weight", "correct": false}, {"label": "C", "text": "Head circumference", "correct": false}, {"label": "D", "text": "Mid-arm circumference", "correct": true}], "correct_answer": "D. Mid-arm circumference", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Mid-arm circumference The mid-arm circumference is an age-independent parameter for growth assessment used between 1-5 years of age. Since it is an age-independent parameter, its value changes little between 1-5 years of age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old malnourished child with dry, scaly, and sharply demarcated eczematoid perioral lesions along with alopecia is most likely to have a deficiency of", "options": [{"label": "A", "text": "Iron", "correct": false}, {"label": "B", "text": "Copper", "correct": false}, {"label": "C", "text": "Calcium", "correct": false}, {"label": "D", "text": "Zinc", "correct": true}], "correct_answer": "D. Zinc", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Zinc Zinc deficiency is not uncommon, and when it occurs in children clinical manifestations include a triad of periorificial dermatitis , alopecia, and diarrhea. Acrodermatitis enteropathica, an autosomal recessive disorder, is caused by a defect of dietary zinc absorption in the duodenum and jejunum resulting in zinc deficiency.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Wrong statement about Menke’s disease", "options": [{"label": "A", "text": "Cause is a mutation in genes coding for the copper-transport protein", "correct": false}, {"label": "B", "text": "Excessive intestinal absorption of copper leading to its deposition", "correct": true}, {"label": "C", "text": "Kinky hairs", "correct": false}, {"label": "D", "text": "Growth failure and nervous system deterioration Seen", "correct": false}], "correct_answer": "B. Excessive intestinal absorption of copper leading to its deposition", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Excessive intestinal absorption of copper leading to its deposition Menkes disease is an X-linked recessive disorder that occurs due to mutations in genes coding for the copper-transport protein ATP7A, resulting in copper deficiency. Patients with Menkes disease fail to grow, have kinky hair, and have nervous system deterioration. Most untreated patients with the classic form of Menkes disease die by the age of 3 years.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 32 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 23 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 4-day-old male infant presents to neonatal intensive care with jaundice that was noticed initially yesterday and gradually has increased. He was delivered at term with a 2.8kg birth weight. His family history is unremarkable. Physical examination revealed an actively jaundiced baby with a temperature of 36.2°C, HR= 156b/min, RR = 35/min. Examination of the eyes reveals a yellow sclera and the entire body is icteric. Total serum bilirubin was found to be 24mg/dl. The baby was started on phototherapy immediately till blood was arranged for exchange transfusion. All of the following are the side effects of exchange transfusion except?", "options": [{"label": "A", "text": "Hypoglycemia", "correct": false}, {"label": "B", "text": "Hypocalcemia", "correct": false}, {"label": "C", "text": "Hypokalemia", "correct": true}, {"label": "D", "text": "Alkalosis", "correct": false}], "correct_answer": "C. Hypokalemia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hypokalemia</p>\n<p><strong>Highyeild:</strong></p><p>Barbiturates and metalloporphyrin ( heam oxygenase inhibitors) Phototherapy is the best approach for neonatal jaundice, side effects are: loose stools, dehydration, retinal damage, hypocalcemia, and bronze baby syndrome, the wavelength used is blue-green light of 460 to 490nm. Exchange transfusion: It is replacing neonates' blood with blood from the blood bank. Single volume exchange transfusion = 80ml/kg Double volume exchange transfusion = 160ml/kg ,most commonly used Indications for double exchange transfusion in RH incompatibility are: cord bilirubin &gt;5mg/dl , cord Hb &lt;10mg/dl Side effects: Hypoglycemia, Hypocalcemia, hyperkalemia, alkalosis</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A preterm, extremely low birth weight( LBW) baby is delivered by C-section at 27 weeks of gestational age. There is a history of prolonged rupture of membranes. The newborn was spontaneously breathing at birth. However, within 6 hours, the baby developed respiratory distress with cyanosis and became O2 dependent from the 2nd week of life. Examination revealed severe dyspnea, with grunting respiration, tachypnea, cyanosis and crackles in lung fields. X-ray showed hyperinflation, right lower zone patchy consolidation with obliteration of costophrenic angle. Which of the following is not used as a treatment option?", "options": [{"label": "A", "text": "Diuretics", "correct": false}, {"label": "B", "text": "Bronchoconstrictors", "correct": true}, {"label": "C", "text": "I.V systemic corticosteroids", "correct": false}, {"label": "D", "text": "Sildenafil", "correct": false}], "correct_answer": "B. Bronchoconstrictors", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Bronchoconstrictors Bronchopulmonary dysplasia:- It is a chronic lung disease in preterm neonates resulting in requirements for prolonged O2 support (60% extreme premature development BPD) It is caused by barotrauma and lung injury due to supplemental O2 and mechanical ventilation that disrupt lung development Suspect BPD when the continued requirement of O2 supplementation in preterm at 28days after birth.</p>\n<p><strong>Highyeild:</strong></p><p>Treatment: Diuretics and avoidance of excessive fluid administration Inhaled bronchodilators I.v systemic corticosteroids iNo and sildenafil Continue respiratory support with monitored weaning</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term neonate was born at 35 weeks gestational age and weighed 3kg. She was transferred to the NICU, in view of respiratory distress. On admission to the NICU, the baby was noted to have cyanosis in room air, RR of 66/min and an apical pulse of 150bpm. Her axillary temperature was recorded as 36°C. Upon examination, grunting was audible with a stethoscope, air entry was normal with mild chest retractions. Calculate the DOWNE score.", "options": [{"label": "A", "text": "5", "correct": false}, {"label": "B", "text": "6", "correct": false}, {"label": "C", "text": "4", "correct": true}, {"label": "D", "text": "7", "correct": false}], "correct_answer": "C. 4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>4 Respiratory distress syndrome is common in preterm &lt; 34 weeks of gestation. The overall incidence is 10 to 15% but can be as high as 80% in neonates &gt; 28 weeks.</p>\n<p><strong>Highyeild:</strong></p><p>In addition to prematurity and asphyxia, acidosis, and maternal diabetes, c-sections can increase the risk of RDS . Respiratory distress is defined as the presence of tachypnea with lower chest retractions, grunting and cyanosis. There are 2 types of respiratory distress severity scoring systems: 1. Downe Vidyasagar score, 2. Silverman Anderson’s scoring system ( in preterm) Downe Vidyasagar score: it can be used in both term and preterm babies &lt;4 = no respiratory distress 4 to 7 = respiratory distress &gt; 7 = impending respiratory distress Score RR CYANOSIS AIR ENTRY GRUNT RETRACTIONS 0 &lt;60/min Nil Normal None Nil 1 60 to 80/min In room air Mild decrease Auscultation With Stethoscope Mild 2 &gt;80/min in 40% Fio2 Marked decrease Auscultation without stethoscope Moderate</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the most common cause of respiratory distress in a 32-week preterm baby?", "options": [{"label": "A", "text": "Transient tachypnea of the newborn", "correct": false}, {"label": "B", "text": "Respiratory distress syndrome", "correct": true}, {"label": "C", "text": "Congenital heart disease", "correct": false}, {"label": "D", "text": "Early onset sepsis", "correct": false}], "correct_answer": "B. Respiratory distress syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Respiratory distress syndrome Hyaline membrane disease or respiratory distress syndrome is the most common cause of respiratory distress in a preterm baby It is primarily a result of surfactant deficiency It is more common in babies &lt; 34 weeks of gestation The severity of this respiratory disorder tends to increase with shorter gestational ages</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term baby was born by normal vaginal delivery and cried immediately after birth. The baby was noted to have excessive frothing from the mouth; the doctor attending the delivery was not able to pass a feeding tube through the mouth of the child. There are no other risk factors except antenatal Ultrasonography USG scan showing polyhydramnios. What is the probable diagnosis?", "options": [{"label": "A", "text": "Transient tachypnea of the newborn", "correct": false}, {"label": "B", "text": "Cyanotic congenital heart disease", "correct": false}, {"label": "C", "text": "Esophageal atresia", "correct": true}, {"label": "D", "text": "Pulmonary hypoplasia", "correct": false}], "correct_answer": "C. Esophageal atresia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Esophageal atresia When there is breathing difficulty in a newborn with frothing around the mouth and spells of cyanosis during feeding , one should suspect esophageal atresia.</p>\n<p><strong>Highyeild:</strong></p><p>The association of polyhydramnios and single umbilical artery increases the likelihood of congenital upper gastrointestinal tract anomalies. It should be suspected if a stiff red rubber catheter cannot be passed through the nasopharynx into the stomach as it gets arrested at a distance of 7-10 cm from the mouth. Esophageal atresia may or may not present with a fistula. There are different types of Tracheoesophageal fistula(TEF) , the most common type is esophageal atresia with distal Tracheoesophageal fistula(TEF).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common type of tracheoesophageal fistula is:", "options": [{"label": "A", "text": "Pure Esophageal atresia EA", "correct": false}, {"label": "B", "text": "Esophageal atresia EA with proximal fistula", "correct": false}, {"label": "C", "text": "Esophageal atresia EA with H-type fistula", "correct": false}, {"label": "D", "text": "Esophageal atresia EA with distal fistula.", "correct": true}], "correct_answer": "D. Esophageal atresia EA with distal fistula.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Esophageal atresia EA with distal fistula. There are 5 types of tracheoesophageal fistulas.</p>\n<p><strong>Highyeild:</strong></p><p>The most common type is the upper esophagus ends blindly and the lower part is connected to the trachea by fistula (Type C or distal Tracheoesophageal fistula-TEF). In this case, on performing an X-ray, an air bubble will be visible in the stomach as there is communication between the trachea and esophagus If there is no communication between esophagus and the trachea, no gas will be seen in the stomach.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the most common cause of respiratory distress in a term baby?", "options": [{"label": "A", "text": "Hyaline membrane disease", "correct": false}, {"label": "B", "text": "Congenital heart disease", "correct": false}, {"label": "C", "text": "Meconium aspiration syndrome", "correct": false}, {"label": "D", "text": "Transient tachypnea of the newborn", "correct": true}], "correct_answer": "D. Transient tachypnea of the newborn", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Transient tachypnea of the newborn There are many causes of respiratory distress in a newborn baby; Hyaline membrane disease (HMD) is most common in preterms and TTNB or transient tachypnea of newborns most common in terms In late preterms and term newborns – transient tachypnea of the newborn is the most common cause of breathing difficulty</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term baby has been delivered by emergency lower uterine segment section (LSCS).lower uterine segment section LSCS and noted to have breathing difficulty. On examination, the abdomen is scaphoid and there is an increased AP diameter in the chest. What is the most probable diagnosis?", "options": [{"label": "A", "text": "Neonatal respiratory distress syndrome (RDS)", "correct": false}, {"label": "B", "text": "Cystic adenomatoid malformations", "correct": false}, {"label": "C", "text": "Congenital diaphragmatic hernia", "correct": true}, {"label": "D", "text": "Tracheoesophageal fistula", "correct": false}], "correct_answer": "C. Congenital diaphragmatic hernia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Congenital diaphragmatic hernia In congenital diaphragmatic hernia, the abdominal contents herniate into the chest through a defect in the diaphragm, giving the appearance of a boat-shaped or scaphoid abdomen This disorder in newborns is frequently associated with polyhydramnios during pregnancy</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are true about surfactants except:", "options": [{"label": "A", "text": "It is produced by type 1 alveolar cells", "correct": true}, {"label": "B", "text": "It reduces the surface tension in the alveoli", "correct": false}, {"label": "C", "text": "Deficiency of surfactant causes hyaline membrane disease", "correct": false}, {"label": "D", "text": "Surfactant production starts around 20 weeks of gestation", "correct": false}], "correct_answer": "A. It is produced by type 1 alveolar cells", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>It is produced by type 1 alveolar cells Surfactant is produced by type 2 alveolar cells and it helps to reduce surface tension in the alveoli.</p>\n<p><strong>Highyeild:</strong></p><p>A deficiency of surfactant causes Neonatal respiratory distress syndrome RDS/Hyaline membrane disease (HMD), the most common cause of respiratory distress in preterms. Usually, surfactant production starts around 20 weeks of gestation; its production peaks at 34-35 weeks gestation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Surfactant production peaks at what gestational age?", "options": [{"label": "A", "text": "20 weeks", "correct": false}, {"label": "B", "text": "28 weeks", "correct": false}, {"label": "C", "text": "32 weeks", "correct": false}, {"label": "D", "text": "35 weeks", "correct": true}], "correct_answer": "D. 35 weeks", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>35 weeks Surfactant production starts at 20 weeks of gestation and peaks at 34-35 weeks of gestation. Therefore, any neonate born earlier than 34-35 weeks gestation is prone to Neonatal respiratory distress syndrome (RDS).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Surfactant appears in the amniotic fluid by what gestation?", "options": [{"label": "A", "text": "20 weeks", "correct": false}, {"label": "B", "text": "22 weeks", "correct": false}, {"label": "C", "text": "28 weeks", "correct": true}, {"label": "D", "text": "34 weeks", "correct": false}], "correct_answer": "C. 28 weeks", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>28 weeks Surfactant production starts at 20 weeks gestation but appears in the amniotic fluid between 28-32 weeks and its production peaks at 34-35 weeks gestation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Surfactant is made up of all of the following:", "options": [{"label": "A", "text": "Phosphatidylcholine", "correct": false}, {"label": "B", "text": "Sphingomyelin", "correct": false}, {"label": "C", "text": "Phosphatidyl glycerol", "correct": false}, {"label": "D", "text": "Surfactant protein E", "correct": true}], "correct_answer": "D. Surfactant protein E", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Surfactant protein E Surfactant is made of Phosphatidylcholine – 75% Phosphatidyl glycerol- 20% Sphingomyelin – 3-4% Surfactant proteins A, B, C, D</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following tests cannot be used to detect fetal lung maturity?", "options": [{"label": "A", "text": "Lecithin sphingomyelin ratio", "correct": false}, {"label": "B", "text": "Lamellar body counts in amniotic fluid", "correct": false}, {"label": "C", "text": "Shake test", "correct": false}, {"label": "D", "text": "Chorionic villus sampling", "correct": true}], "correct_answer": "D. Chorionic villus sampling", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Chorionic villus sampling To assess fetal lung maturity the following tests can be done Lecithin sphingomyelin ratio- L:S ratio &gt;2 normal lung maturity L:S ratio &lt; 1.5- immature lungs Amniotic fluid Shake test - Add 95% ethyl alcohol to amniotic fluid in a test tube shake well and leave it for 15 min. If a ring of bubble formed- positive test- indicates lung maturity (can be done after birth with gastric aspirate as well) Phosphatidyl glycerol assay Lamellar body counts - &gt;50,000- mature lungs &lt; 15,000- immature lungs</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following drug if given antenatally to the mother improves lung maturity and prevents Neonatal respiratory distress syndrome(RDS) in preterm babies?", "options": [{"label": "A", "text": "Dexamethasone", "correct": true}, {"label": "B", "text": "Magnesium sulphate", "correct": false}, {"label": "C", "text": "Surfactant infusion in amniotic fluid", "correct": false}, {"label": "D", "text": "Immunoglobulin", "correct": false}], "correct_answer": "A. Dexamethasone", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Dexamethasone Antenatal corticosteroids, both betamethasone and dexamethasone, given to mothers likely to give birth to preterms can significantly improve fetal pulmonary maturity. American College of Obstetricians and Gynecologists (ACOG) recommends that for all women between 24-36 weeks gestation who present in preterm labour and are likely to deliver a fetus within 1 week, antenatal steroid administration should be considered.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the dose of dexamethasone that can be given antenatally to the mother to improve lung function in the fetus?", "options": [{"label": "A", "text": "6mg in 24 hourly for 2 days", "correct": false}, {"label": "B", "text": "12mg in 12 hourly for 2 days", "correct": false}, {"label": "C", "text": "6mg in 12 hourly for 2 days", "correct": true}, {"label": "D", "text": "12 mg in 24 hourly for 2 days", "correct": false}], "correct_answer": "C. 6mg in 12 hourly for 2 days", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>6mg in 12 hourly for 2 days Dexamethasone 6mg in 12 hours for 2 days. Total 4 doses. Betamethasone 12mg in 24 hours for 2 days. Total 2 doses.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Surfactant production can be deactivated by all of the following conditions except:", "options": [{"label": "A", "text": "Birth asphyxia", "correct": false}, {"label": "B", "text": "Meconium aspiration", "correct": false}, {"label": "C", "text": "Gestational hypertension", "correct": true}, {"label": "D", "text": "Pulmonary ischemia", "correct": false}], "correct_answer": "C. Gestational hypertension", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Gestational hypertension Surfactant production can be reduced/inactivated in the following Birth asphyxia Pulmonary ischemia Infant of diabetic mother Meconium aspiration</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The hyaline membrane in a newborn with Hyaline membrane disease (HMD)is predominantly made up of:", "options": [{"label": "A", "text": "Fibrin rich exudates", "correct": true}, {"label": "B", "text": "Albumin and complement", "correct": false}, {"label": "C", "text": "Mucous", "correct": false}, {"label": "D", "text": "Precipitated surfactant", "correct": false}], "correct_answer": "A. Fibrin rich exudates", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Fibrin rich exudates The pathophysiology of Hyaline membrane disease (HMD) is complicated.</p>\n<p><strong>Highyeild:</strong></p><p>In the absence of pulmonary surfactant, the alveoli collapse and Functional residual capacity (FRC) are impaired. Further hypoxia and inflammation due to alveolar collapse damage the alveolar epithelium and the proteinaceous material in the lung interstitium and cellular debris (fibrin) lines the alveoli forming the classical hyaline membrane.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are classical Chest X-ray features of Neonatal Respiratory Distress Syndrome (RDS) except", "options": [{"label": "A", "text": "Reticulo granular opacity", "correct": false}, {"label": "B", "text": "Air bronchogram", "correct": false}, {"label": "C", "text": "Hyperaerated lungs", "correct": true}, {"label": "D", "text": "Ground glass opacity", "correct": false}], "correct_answer": "C. Hyperaerated lungs", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hyperaerated lungs Chest X-ray changes in Neonatal respiratory distress syndrome (RDS) are Ground glass opacity or reticulo granular opacity Hyperaerated lungs Presence of air bronchograms</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Congenital alveolar proteinosis is due to a deficiency of which surfactant protein?", "options": [{"label": "A", "text": "Surfactant protein A", "correct": false}, {"label": "B", "text": "Surfactant protein B", "correct": true}, {"label": "C", "text": "Surfactant protein C", "correct": false}, {"label": "D", "text": "Surfactant protein D", "correct": false}], "correct_answer": "B. Surfactant protein B", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Surfactant protein B Congenital alveolar proteinosis is a rare familial disorder due to a deficiency of surfactant protein B. It is respiratory distress in term and near-term infants.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 33-week preterm baby was born by normal vaginal delivery, cried at birth and was shifted to Neonatal Intensive Care Unit (NICU). The baby was started on oxygen 2L through nasal prongs but continued to have respiratory distress, Spo2 – 93%, ABG showed paCO2 of 55 mm Hg, pH 7.25 What is the next step in management?", "options": [{"label": "A", "text": "Change to nasal Continuous positive airway pressure(CPAP)", "correct": true}, {"label": "B", "text": "Intubate and ventilate", "correct": false}, {"label": "C", "text": "Change to hood box oxygen", "correct": false}, {"label": "D", "text": "Continue nasal prongs oxygen", "correct": false}], "correct_answer": "A. Change to nasal Continuous positive airway pressure(CPAP)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Change to nasal Continuous positive airway pressure(CPAP) In a neonate, Hyaline membrane disease (HMD) , warm, humidified oxygen should be provided at a concentration sufficient to keep PaO2 between 50 and 70 mmHg and SpO2 91-95% to maintain normal tissue oxygenation.</p>\n<p><strong>Highyeild:</strong></p><p>Even with oxygen, if there is respiratory distress and the baby is unable to maintain SpO2 &gt;90% at fio2 &gt; 40-70% , nasal continuous positive airway pressure CPAP should start with PEEP 5-10 cm H2O. Nasal CPAP reduces the collapse of alveoli and improves both FRC and ventilation-perfusion matching Overall, nasal Continuous positive airway pressure (CPAP) should be considered a front-line management approach in Hyaline membrane disease (HMD), usually for neonates with mild Respiratory Distress (RD) and overall good respiratory efforts. If respiratory distress is severe, mechanical ventilation with or without surfactant administration should be considered.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Recently surfactant administration using the LISA technique has been recommended as a promising technique in newborns. LISA stands for:", "options": [{"label": "A", "text": "Low-invasive surfactant administration", "correct": false}, {"label": "B", "text": "Less invasive surfactant administration", "correct": true}, {"label": "C", "text": "Low intubation surfactant administration", "correct": false}, {"label": "D", "text": "Laser-assisted invasive surfactant administration", "correct": false}], "correct_answer": "B. Less invasive surfactant administration", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Less invasive surfactant administration LISA- less invasive surfactant administration MIST- minimally invasive surfactant technique INSURE- intubate, surfactant and extubate</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following respiratory disorders is primarily due to the slow absorption of fetal lung fluid?", "options": [{"label": "A", "text": "Pulmonary alveolar proteinosis", "correct": false}, {"label": "B", "text": "Respiratory distress syndrome(RDS)", "correct": false}, {"label": "C", "text": "Transient tachypnea of the newborn", "correct": true}, {"label": "D", "text": "Pulmonary hypertension", "correct": false}], "correct_answer": "C. Transient tachypnea of the newborn", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Transient tachypnea of the newborn Transient tachypnea of newborns develops in term or late preterm babies and is due to the slow absorption of fetal lung fluids It is also called wet lung syndrome or Respiratory distress syndrome RDS type II It is primarily a diagnosis of exclusion It is more common in Cesarean sections without labour, precipitous delivery, and infants of diabetic mothers.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 40 weeks term male baby was delivered by cesarean section because of failed induction. Baby cried immediately after birth but was noted to have tachypnea so shifted to the Neonatal Intensive Care Unit (NICU). A chest X-ray was taken which is shown below. What is the diagnosis?", "options": [{"label": "A", "text": "Respiratory distress syndrome(RDS)", "correct": false}, {"label": "B", "text": "Transient tachypnea of the newborn (TTNB)", "correct": true}, {"label": "C", "text": "Pulmonary alveolar proteinosis", "correct": false}, {"label": "D", "text": "Congenital pneumonia", "correct": false}], "correct_answer": "B. Transient tachypnea of the newborn (TTNB)", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883314198-QTDK016023IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Transient tachypnea of the newborn (TTNB) X-ray shows fluids in the lobar fissures Starburst appearance No air bronchogram/ground glass opacity</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 33 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 8 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "During a regular visit to the paediatrician 1 week after birth, an infant's size and head circumference are noted as being in the 75th percentile. Still, the baby's head circumference is now at the 95th percentile. The paediatrician notes that the baby's anterior fontanelle is tense, and the skull sutures are open. He obtains an MRI of the brain with iv contrast. This study shows the presence of significantly dilated lateral and third ventricles. The aqueduct of Sylvius cannot be easily visualised. The fourth ventricle is small. There are no lesions within the subarachnoid space or cerebral parenchyma. The appearance of MRI is consistent with which of the following?", "options": [{"label": "A", "text": "Non-communicating hydrocephalus", "correct": true}, {"label": "B", "text": "Communicating hydrocephalus", "correct": false}, {"label": "C", "text": "Normal pressure hydrocephalus", "correct": false}, {"label": "D", "text": "Arnold Chiari syndrome", "correct": false}], "correct_answer": "A. Non-communicating hydrocephalus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Non-communicating hydrocephalus Non-communicating hydrocephalus is caused by obstruction of CSF flow and obstruction within the ventricular system. In this case, the ventricular system is dilated upstream from obstruction caused by stenosis of the aqueduct of Sylvius and collapsed distally .</p>\n<p><strong>Highyeild:</strong></p><p>Hydrocephalus: Hydrocephalus refers to increased CSF volume with ventricular enlargement, often presenting symptoms of raised ICP. Aetiology of hydrocephalus. Obstructive hydrocephalus ● Lesions within the ventricle ● Lesions in the ventricular wall ● Lesions distant from the ventricle but with a mass effect Communicating hydrocephalus ● Post haemorrhagic ● CSF infection ● Raised CSF protein Excessive CSF production (rare) Choroid plexus papilloma/carcinoma Obstructive or communicating hydrocephalus may occur due to neurosurgical pathology or its treatment. CT is the first line of investigation. A lumbar puncture can confirm raised CSF pressure in communicating hydrocephalus and relieve it temporarily, but it is dangerous in obstructive hydrocephalus. Normal pressure hydrocephalus is a potentially reversible cause of dementia, presenting with gait disturbance, incontinence and cognitive decline. IIH causes headaches and even vision loss in young people; it can be managed with weight loss, acetazolamide, serial lumbar puncture and CSF diversion as a last resort Treatment: Temporary CSF diversion can be achieved with an EVD(external ventricular drain) In the long term, a shunt, usually connecting the lateral ventricles with the peritoneal cavity in the abdomen (ventriculoperitoneal shunt), is the mainstay of management. Shunt blockage and infection are common complications In some instances, obstructive hydrocephalus can be managed by endoscopic third ventriculostomy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Communicating hydrocephalus occurs when the obstruction of CSF flow occurs within the subarachnoid space or at the level of its resorption into the bloodstream by the arachnoid granulations. In this case, all ventricles are dilated proportionally. Option: C. Normal pressure hydrocephalus is seen in the elderly, with symmetrical enlargement of the entire ventricular system. It has the characteristic triad of urinary incontinence, dementia, and unsteady (magnetic) gait. Option: D. Arnold Chiari syndrome is characterised by abnormal elongation of the medulla and lower cranial nerves and their herniation through the foramen magnum.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4- month- old infant has undergone surgical treatment for meningo-myelo-encephalocele. A CT head was made immediately after birth. At birth, an operation was carried out in the posterior cranial fossa to replace brain cerebellar contents to an intra-cranial position partially. In investigations for progressive hydrocephalus, it is noted that there is herniation of cerebellar tonsils through the foramen magnum and a diagnosis of Arnold Chiari syndrome is established. This syndrome may also include the following.", "options": [{"label": "A", "text": "Fusion of frontal bones", "correct": false}, {"label": "B", "text": "Fusion of temporal, parietal and occipital lobes", "correct": false}, {"label": "C", "text": "Abnormal elongation of the medulla and lower cranial nerves", "correct": true}, {"label": "D", "text": "Hypertrophy of the cerebral lobes", "correct": false}], "correct_answer": "C. Abnormal elongation of the medulla and lower cranial nerves", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Abnormal elongation of the medulla and lower cranial nerves Abnormal elongation of the medulla and lower cranial nerves may be evident in Arnold Chiari syndrome. Additional features include the fusion of corpora quadrigemina leading to a “beaked” tectum and the partial or complete absence of corpus callosum and microgyria. The corpora quadrigemina are relay stations for hearing(inferior) and light reflex (superior), forming the midbrain's posterior surface.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Abnormal fusion of skull bones is known as craniosynostosis and may show characteristic appearances Option: B. Fusion of brain lobes is known as holoprosencephaly.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant 1 week after birth has anterior fontanelle tense with open skull sutures. An MRI shows dilated lateral 3rd ventricles. The aqueduct of Sylvius is not visualised, and the 4th ventricle is small. The preferred shunt here is -", "options": [{"label": "A", "text": "Ventriculoperitoneal shunt", "correct": true}, {"label": "B", "text": "Ventriculopericardial shunt", "correct": false}, {"label": "C", "text": "Ventriculopleural shunt", "correct": false}, {"label": "D", "text": "Lumboperitoenal shunt", "correct": false}], "correct_answer": "A. Ventriculoperitoneal shunt", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ventriculoperitoneal shunt Ventriculoperitoneal shunt – the diagnosis here is hydrocephalus, and the most common and preferred shunt performed is the ventriculoperitoneal shunt</p>\n<p><strong>Highyeild:</strong></p><p>Hydrocephalus: Hydrocephalus refers to increased CSF volume with ventricular enlargement, often presenting symptoms of raised ICP. table,tr,th,td {border:1px solid black;} Aetiology of hydrocephalus. Obstructive hydrocephalus ● Lesions within the ventricle ● Lesions in the ventricular wall ● Lesions distant from the ventricle but with a mass effect Communicating hydrocephalus ● Post haemorrhagic ● CSF infection ● Raised CSF protein Excessive CSF production (rare) Choroid plexus papilloma/carcinoma Obstructive or communicating hydrocephalus may occur due to neurosurgical pathology or its treatment. CT is the first line of investigation. A lumbar puncture can confirm raised CSF pressure in communicating hydrocephalus and relieve it temporarily, but it is dangerous in obstructive hydrocephalus. Normal pressure hydrocephalus is a potentially reversible cause of dementia, presenting with gait disturbance, incontinence and cognitive decline. IIH causes headaches and even vision loss in young people; it can be managed with weight loss, acetazolamide, serial lumbar puncture and CSF diversion as a last resort. Treatment: Temporary CSF diversion can be achieved with an EVD(external ventricular drain) In the long term, a shunt, usually connecting the lateral ventricles with the peritoneal cavity in the abdomen (ventriculoperitoneal shunt), is the mainstay of management Shunt blockage and infection are common complications. In some instances, obstructive hydrocephalus can be managed by endoscopic third ventriculostomy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Ventriculo pericardial shunt is not performed for hydrocephalus. Ventriculo atrial shunt is performed instead. Option: C. Ventriculopleural shunts are alternative shunts for hydrocephalus when ventriculoperitoneal shunt fails or cannot be performed for some reason Option: D. Lumboperitoneal shunt is the mainstay of idiopathic intracranial hypertension treatment</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant is diagnosed to have hydrocephalus and posted for shunt surgery. The distal catheter of the CSF shunt is placed in all of the following except?", "options": [{"label": "A", "text": "Pleural cavity", "correct": false}, {"label": "B", "text": "Right atrium", "correct": false}, {"label": "C", "text": "Peritoneal cavity", "correct": false}, {"label": "D", "text": "Lateral ventricle", "correct": true}], "correct_answer": "D. Lateral ventricle", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Lateral ventricle Lateral ventriculostomy is typically placed in the lateral ventricle through a burr hole. This procedure is beneficial in obstructive hydrocephalus due to aqueduct stenosis. A neuro endoscope is inserted into the frontal horn of the lateral ventricle and then into the third ventricle via the foramen of Monro</p>\n<p><strong>Highyeild:</strong></p><p>Hydrocephalus: Hydrocephalus refers to increased CSF volume with ventricular enlargement, often presenting symptoms of raised ICP. table,tr,th,td {border:1px solid black;} Aetiology of hydrocephalus. Obstructive hydrocephalus ● Lesions within the ventricle ● Lesions in the ventricular wall ● Lesions distant from the ventricle but with a mass effect Communicating hydrocephalus ● Post haemorrhagic ● CSF infection ● Raised CSF protein Excessive CSF production (rare) Choroid plexus papilloma/carcinoma Obstructive or communicating hydrocephalus may occur due to neurosurgical pathology or its treatment. CT is the first line of investigation. A lumbar puncture can confirm raised CSF pressure in communicating hydrocephalus and relieve it temporarily, but it is dangerous in obstructive hydrocephalus. Normal pressure hydrocephalus is a potentially reversible cause of dementia, presenting with gait disturbance, incontinence and cognitive decline. IIH causes headaches and even vision loss in young people; it can be managed with weight loss, acetazolamide, serial lumbar puncture and CSF diversion as a last resort. Treatment: Temporary CSF diversion can be achieved with an EVD(external ventricular drain) In the long term, a shunt, usually connecting the lateral ventricles with the peritoneal cavity in the abdomen (ventriculoperitoneal shunt), is the mainstay of management Shunt blockage and infection are common complications. In some instances, obstructive hydrocephalus can be managed by endoscopic third ventriculostomy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. A VPLS (ventriculo-pleural shunt) where the distal catheter is placed in the pleural cavity provides a temporary site for diverting CSF when a peritoneal cavity is contaminated. Option: B. When the peritoneal cavity is suboptimal for VPS, the right atrium is another option for placing the distal The internal jugular, external jugular or facial vein may be cannulated and then fed to the right atrium under fluoroscopic guidance. Option: C. Diverting CSF to the peritoneal cavity via VPS is the most common mode of CSF diversion.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6- year- old female with a VP shunt for congenital hydrocephalus (aqueductal stenosis) presents to the emergency department with a headache, fever (101 f), abdominal pain, nausea and vomiting. No one else is sick in the house. On examination, she is drowsy. As the intern managing the patient, what would you do next?", "options": [{"label": "A", "text": "Send her home with an appointment to see her neurologist next week.", "correct": false}, {"label": "B", "text": "Admit her and give her Tylenol for fever", "correct": false}, {"label": "C", "text": "Obtain a chest X-ray first", "correct": false}, {"label": "D", "text": "Obtain a head CT first", "correct": true}], "correct_answer": "D. Obtain a head CT first", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Obtain a head CT first Obtain a head CT first – the child has symptoms of increased intracranial pressure making brain imaging to rule out shunt malfunction mandatory. Subsequent imaging of the abdomen for a possible abdominal pseudocyst or other abdominal pathology is also indicated. If the shunt malfunctions due to infection, this child may need emergency external ventricular drainage.</p>\n<p><strong>Highyeild:</strong></p><p>Hydrocephalus: Hydrocephalus refers to increased CSF volume with ventricular enlargement, often presenting symptoms of raised ICP. table,tr,th,td {border:1px solid black;} Aetiology of hydrocephalus. Obstructive hydrocephalus ● Lesions within the ventricle ● Lesions in the ventricular wall ● Lesions distant from the ventricle but with a mass effect Communicating hydrocephalus ● Post haemorrhagic ● CSF infection ● Raised CSF protein Excessive CSF production (rare) Choroid plexus papilloma/carcinoma Obstructive or communicating hydrocephalus may occur due to neurosurgical pathology or its treatment. CT is the first line of investigation. A lumbar puncture can confirm raised CSF pressure in communicating hydrocephalus and relieve it temporarily, but it is dangerous in obstructive hydrocephalus. Normal pressure hydrocephalus is a potentially reversible cause of dementia, presenting with gait disturbance, incontinence and cognitive decline. IIH causes headaches and even vision loss in young people; it can be managed with weight loss, acetazolamide, serial lumbar puncture and CSF diversion as a last resort. Treatment: Temporary CSF diversion can be achieved with an EVD(external ventricular drain) In the long term, a shunt, usually connecting the lateral ventricles with the peritoneal cavity in the abdomen (ventriculoperitoneal shunt), is the mainstay of management Shunt blockage and infection are common complications. In some instances, obstructive hydrocephalus can be managed by endoscopic third ventriculostomy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. This is not the next step. This child has evidence of increased intracranial pressure (headache, nausea, vomiting and lethargy), which could indicate a possible VP shunt malfunction. Sending this patient home before evaluating her shunt may subject the child to increased intracranial pressure, herniation and death. No emergency condition can be sent home without proper evaluation! Option: B. This is not the next step. This patient may not be a candidate for management in the ward if she truly has increased intracranial pressure from VP shunt malfunction. A head CT is advisable. This patient’s fever (101 f), abdominal pain, nausea, vomiting and sleepiness could indicate a viral/bacterial illness, and Tylenol for fever may be appropriate. However, the entire shunt system will most likely need to be removed, and external ventricular drainage be established in case of a shunt infection. Option: C. This is not the next step. Evaluation for ventricular shunt malfunction typically includes a head CT followed by a shunt series (x-rays of skull, neck, chest and abdomen) if indicated.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A week after birth, an infant presents with tense anterior fontanelle and open skull sutures. MRI with contrast reveals significantly dilated lateral and 3rd ventricles. All of these can contribute to the diagnosis except?", "options": [{"label": "A", "text": "Meningitis", "correct": true}, {"label": "B", "text": "Tumours of the 4th ventricle", "correct": false}, {"label": "C", "text": "Intraventricular haemorrhage", "correct": false}, {"label": "D", "text": "Tumours of the midbrain", "correct": false}], "correct_answer": "A. Meningitis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Meningitis Meningitis (especially tubercular and Haemophilus/ pneumococcal) often causes adhesions at the base of the brain in the basal cisterns and therefore causes communicating hydrocephalus.</p>\n<p><strong>Highyeild:</strong></p><p>Hydrocephalus: Hydrocephalus refers to increased CSF volume with ventricular enlargement, often presenting symptoms of raised ICP. table,tr,th,td {border:1px solid black;} Aetiology of hydrocephalus. Obstructive hydrocephalus ● Lesions within the ventricle ● Lesions in the ventricular wall ● Lesions distant from the ventricle but with a mass effect Communicating hydrocephalus ● Post haemorrhagic ● CSF infection ● Raised CSF protein Excessive CSF production (rare) Choroid plexus papilloma/carcinoma Obstructive or communicating hydrocephalus may occur due to neurosurgical pathology or its treatment. CT is the first line of investigation. A lumbar puncture can confirm raised CSF pressure in communicating hydrocephalus and relieve it temporarily, but it is dangerous in obstructive hydrocephalus. Normal pressure hydrocephalus is a potentially reversible cause of dementia, presenting with gait disturbance, incontinence and cognitive decline. IIH causes headaches and even vision loss in young people; it can be managed with weight loss, acetazolamide, serial lumbar puncture and CSF diversion as a last resort. Treatment: Temporary CSF diversion can be achieved with an EVD(external ventricular drain) In the long term, a shunt, usually connecting the lateral ventricles with the peritoneal cavity in the abdomen (ventriculoperitoneal shunt), is the mainstay of management Shunt blockage and infection are common complications. In some instances, obstructive hydrocephalus can be managed by endoscopic third ventriculostomy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Obstructive hydrocephalus is caused by tumours blocking the foramen of Munro, cerebral aqueduct or fourth ventricle. Option: C. Midbrain tumours often obstruct the cerebral aqueduct. Option: D. Intraventricular haemorrhage can obstruct the aqueduct or foramen of Munro.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10- year- old boy who underwent a ventriculoperitoneal shunt surgery 7 years ago for hydrocephalus presents with features of appendicitis. During the emergency surgery, it is found that the appendix is ruptured, and the VPS catheter is seen. The next line of management will be ?", "options": [{"label": "A", "text": "Appendicectomy done, drain the pus and leave an abdominal drain in place", "correct": false}, {"label": "B", "text": "Appendicectomy done, the shunt is externalised, broad-spectrum antibiotics are started, and once the infection is subsided, another site in the peritoneal cavity is chosen to insert a shunt", "correct": true}, {"label": "C", "text": "Appendicectomy procedure is deferred for a later date", "correct": false}, {"label": "D", "text": "Appendicectomy is performed, and broad-spectrum antibiotics are started.", "correct": false}], "correct_answer": "B. Appendicectomy done, the shunt is externalised, broad-spectrum antibiotics are started, and once the infection is subsided, another site in the peritoneal cavity is chosen to insert a shunt", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Appendicectomy done, the shunt is externalised, broad-spectrum antibiotics are started, and once the infection is subsided, another site in the peritoneal cavity is chosen to insert a shunt Since the appendix is ruptured, appendicectomy is done. Shunt is externalised for time being and once the infection is subsided after antibiotc coverage another site to insert a shunt is choosen.</p>\n<p><strong>Highyeild:</strong></p><p>Hydrocephalus: Hydrocephalus refers to increased CSF volume with ventricular enlargement, often presenting symptoms of raised ICP. table,tr,th,td {border:1px solid black;} Aetiology of hydrocephalus. Obstructive hydrocephalus ● Lesions within the ventricle ● Lesions in the ventricular wall ● Lesions distant from the ventricle but with a mass effect Communicating hydrocephalus ● Post haemorrhagic ● CSF infection ● Raised CSF protein Excessive CSF production (rare) Choroid plexus papilloma/carcinoma Obstructive or communicating hydrocephalus may occur due to neurosurgical pathology or its treatment. CT is the first line of investigation. A lumbar puncture can confirm raised CSF pressure in communicating hydrocephalus and relieve it temporarily, but it is dangerous in obstructive hydrocephalus. Normal pressure hydrocephalus is a potentially reversible cause of dementia, presenting with gait disturbance, incontinence and cognitive decline. IIH causes headaches and even vision loss in young people; it can be managed with weight loss, acetazolamide, serial lumbar puncture and CSF diversion as a last resort. Treatment: Temporary CSF diversion can be achieved with an EVD(external ventricular drain) In the long term, a shunt, usually connecting the lateral ventricles with the peritoneal cavity in the abdomen (ventriculoperitoneal shunt), is the mainstay of management. Shunt blockage and infection are common complications. In some instances, obstructive hydrocephalus can be managed by endoscopic third ventriculostomy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. There is a high possibility of shunt infection after the procedure since it is exposed to the infected material in the peritoneal cavity. Option: C. Deferring procedure will put the patient’s life at risk since it is a case of a perforated appendix and the patient is in peritonitis. All abdominal perforations mandate immediate exploration! Even if the infection localises after antibiotics, it may lead to the development of a pelvic abscess. Option: D. Not putting a drain leaves the possibility of residual abscess, which may lead to shunt infection and pelvic abscess.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6- year- old boy, after undergoing ventriculoperitoneal shunt surgery for hydrocephalus, develops swelling of the scrotum 6 months after surgery. The most likely cause of this is?", "options": [{"label": "A", "text": "Testicular tumour", "correct": false}, {"label": "B", "text": "Hypoalbuminemia", "correct": false}, {"label": "C", "text": "Hydrocele", "correct": true}, {"label": "D", "text": "Epididymo-orchitis", "correct": false}], "correct_answer": "C. Hydrocele", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hydrocele Hydrocele – the persistence of the peritoneo-vaginal canal causes the CSF to track from peritoneal cavity into the scrotum, thus causing hydrocele .</p>\n<p><strong>Highyeild:</strong></p><p>Hydrocephalus: Hydrocephalus refers to increased CSF volume with ventricular enlargement, often presenting symptoms of raised ICP. table,tr,th,td {border:1px solid black;} Aetiology of hydrocephalus. Obstructive hydrocephalus ● Lesions within the ventricle ● Lesions in the ventricular wall ● Lesions distant from the ventricle but with a mass effect Communicating hydrocephalus ● Post haemorrhagic ● CSF infection ● Raised CSF protein Excessive CSF production (rare) Choroid plexus papilloma/carcinoma Obstructive or communicating hydrocephalus may occur due to neurosurgical pathology or its treatment. CT is the first line of investigation. A lumbar puncture can confirm raised CSF pressure in communicating hydrocephalus and relieve it temporarily, but it is dangerous in obstructive hydrocephalus. Normal pressure hydrocephalus is a potentially reversible cause of dementia, presenting with gait disturbance, incontinence and cognitive decline. IIH causes headaches and even vision loss in young people; it can be managed with weight loss, acetazolamide, serial lumbar puncture and CSF diversion as a last resort. Treatment: Temporary CSF diversion can be achieved with an EVD(external ventricular drain) In the long term, a shunt, usually connecting the lateral ventricles with the peritoneal cavity in the abdomen (ventriculoperitoneal shunt), is the mainstay of management. Shunt blockage and infection are common complications. In some instances, obstructive hydrocephalus can be managed by endoscopic third ventriculostomy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Testicular tumors are highly unlikely in this age group Option: B. Hypoalbuminemia is one of the common causes of scrotal swelling in the elderly. However there is no relation to age and the VPS in this case. Option: D. Epidydimo-orchitis usually presents with tender scrotal swelling and fever, both of which are absent here.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 18 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 4 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "As a JR-1 on rounds, you examine a neonate born 36 hours ago via full-term vaginal delivery; the mother is worried about the newborn not having passed meconium. Based on the examination, you think of Hirschsprung disease as the provisional diagnosis for the neonate's condition. Which of the following statements justify your diagnosis of the same?", "options": [{"label": "A", "text": "In long-segment disease – aganglionosis extends from the sigmoid to the rectum", "correct": false}, {"label": "B", "text": "Transition zone is seen on Contrast enema in Hirschsprung disease", "correct": true}, {"label": "C", "text": "Aganglionic segment is dilated in Hirschsprung disease", "correct": false}, {"label": "D", "text": "Diagnostic modality for Hirschsprung is Barium Contrast enema", "correct": false}], "correct_answer": "B. Transition zone is seen on Contrast enema in Hirschsprung disease", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Transition zone is seen on Contrast enema in Hirschsprung disease Transition zone, in contrast, enema is an area of Hypo Ganglionic fibres sandwiched between an aganglionic area below it &amp; an area of normal ganglionic fibres above it.</p>\n<p><strong>Highyeild:</strong></p><p>Short segment disease – MC [ aganglionosis is limited to rectum &amp; sigmoid] Long segment disease - aganglionosis extends from the rectum proximally to the sigmoid and even further.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Hirschsprung disease has two different types. Option: C. Aganglionic segment is CONTRACTED &amp; normal/ proximal segment is dilated. Option: D. Diagnostic modality for Hirschsprung is complete thickness rectal biopsy or suction biopsy done 1.5 cm above the dentate.</p>\n<p><strong>Extraedge:</strong></p><p>Barium Contrast enema – Rectosigmoid ratio &lt; 1 helps differentiate Hirschsprung disease from functional constipation in a newborn.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A mother brings her 3 weeks old neonate to the pediatric OPD with the complaints of increased irritability after feeding, regurgitation of the feeds, and projectile non-bilious vomiting that has increased in severity since the past week; she also complains of a mass seen in the child's abdomen once the child is fed. While examining, you observe the following movement on the child's abdomen, as in the video. Considering the following history, which of the following points is consistent with the underlying etiology?", "options": [{"label": "A", "text": "Sausage-shaped mass can be appreciated on examination", "correct": false}, {"label": "B", "text": "Peristalsis wave is appreciated from right hypochondrium to umbilicus", "correct": false}, {"label": "C", "text": "Mass is typically felt after vomiting", "correct": true}, {"label": "D", "text": "PYLORIC thickness &lt; 3mm is diagnostic on USG", "correct": false}], "correct_answer": "C. Mass is typically felt after vomiting", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Mass is typically felt after vomiting Mass is typically felt after vomiting due to a decrease in guarding of muscles following vomiting. Mass is typically seen after test feeds.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Sausage-shaped mass is seen in intussusception . Olive shaped mass is seen in Hypertrophic Pyloric Stenosis Option: B. Peristalsis is seen from the left hypochondrium to the umbilicus. Option: D. Pyloric thickness &gt;4mm is diagnostic on Ultragram Sonography (USG)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following 5 findings is consistent with diagnosing Infantile Hypertrophic Pyloric Stenosis? A. Projectile vomiting presents after the first feed following birth. B. 3 P’s of Hypertrophic Pyloric Stenosis is – Projectile vomiting, Pyloric mass, Peristaltic waves C. Cupola sign is appreciated on abdominal X-rays in cases of hypertrophic pyloric stenosis D. Hypochloremic, Hypokalemic Metabolic alkalosis is a metabolic abnormality seen in Infantile Hypertrophic Pyloric Stenosis E. Paradoxical aciduria is seen in Infantile Hypertrophic Pyloric Stenosis. Select the correct answer from given below code:", "options": [{"label": "A", "text": "A, B, C, D, E are true", "correct": false}, {"label": "B", "text": "B, E are true", "correct": false}, {"label": "C", "text": "B, D, E are true", "correct": true}, {"label": "D", "text": "A, E are true", "correct": false}], "correct_answer": "C. B, D, E are true", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>B, D, E are true Statement A. Projectile vomiting presents from 2 to 12 weeks after birth, not immediately after birth. Statement B. 3 P’s of Hypertrophic Pyloric Stenosis is – Projectile vomiting, Pyloric mass, Peristaltic waves Statement C. Cupola sign is appreciated on abdominal x-ray in cases of PNEUMOPERITONEUM Statement D. HypOchloremic, Hypokalemic Metabolic alkalosis is a metabolic abnormality seen in Infantile Hypertrophic Pyloric Stenosis Statement E. Paradoxical aciduria is a metabolic abnormality seen in Infantile Hypertrophic Pyloric Stenosis</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "As an intern attending OPD with the senior consultant, you see a 2-year-old child brought in with complaints of severe abdominal pain for the past 4 days, on a further detailed history, the mother states that there is presence of blood and mucus in the stools. While examining the patient, the consultant asks the following statements in context with the underlying etiology of abdominal pain in this child. Which of the statements above are inconsistent with the underlying etiology?", "options": [{"label": "A", "text": "Intussusception is the most common cause of intestinal obstruction in children", "correct": false}, {"label": "B", "text": "Most common segment involved in intussusception is the ileocolic segment", "correct": false}, {"label": "C", "text": "Waterlily seen is seen in on CT scan of children with intestinal obstruction", "correct": true}, {"label": "D", "text": "First line of treatment to relieve abdominal pain in this patient is an air enema.", "correct": false}], "correct_answer": "C. Waterlily seen is seen in on CT scan of children with intestinal obstruction", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Waterlily seen is seen in on CT scan of children with intestinal obstruction Water-lily sign, also known as the camalote sign, is seen in hydatid infections when there is detachment of the endocytic membrane , resulting in floating membranes within the pericyst that mimic the appearance of a water lily.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 14 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 15 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Match the following Select the correct answer from the given below code:", "options": [{"label": "A", "text": "A-3, B-2,C-1", "correct": false}, {"label": "B", "text": "A-2, B-3, C-1", "correct": true}, {"label": "C", "text": "A-1, B-3,C-2", "correct": false}, {"label": "D", "text": "A-2,B-1,C-3", "correct": false}], "correct_answer": "B. A-2, B-3, C-1", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1689445026187-QTDK036001IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>A-2, B-3, C-1 Loose watery Stools &lt;2 weeks = Acute Diarrhea 2-4 weeks- Persistent Diarrhea &gt;4 weeks= Chronic Diarrhea</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-month-old neonate who is predominantly cow milk fed is brought by his mother to OPD with complaints of inconsolable crying in the evenings, which has increased in intensity since birth. On an in-depth inquiry from the mother regarding the child's birth history, the mother says it was an uneventful full-term normal vaginal delivery. There is no history of fever, cough, cold, vomiting, rash, blood &amp; mucus in stool since birth. Vaccinations have been administered according to schedule, amongst the following options, which are in accordance with the infant's condition based on history elicited from the mother.", "options": [{"label": "A", "text": "The inconsolable crying in this infant is due to the administration of rotavirus vaccination", "correct": false}, {"label": "B", "text": "Most common cause of abdominal pain in infants of this age group is due to amoebiasis", "correct": false}, {"label": "C", "text": "Abdominal pain in infants of this age group is due to the consumption of cow’s milk", "correct": true}, {"label": "D", "text": "Recurrent abdominal pain in children is due to infection with Giardia", "correct": false}], "correct_answer": "C. Abdominal pain in infants of this age group is due to the consumption of cow’s milk", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Abdominal pain in infants of this age group is due to the consumption of cow’s milk Cow’s milk protein allergy. - is the most common cause of evening colic in infants up to 3 months of age. Inconsolable crying in evenings- Pointer for abdominal pain due to evening/infantile colic. Infantile colic is the most common cause of abdominal pain in infants in the first 3 months. Rule of’3’ infantile colics/evening colics- Crying for a minimum of 3 hours a day, 3 days a week &amp; till 3 months of age.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A . The inconsolable crying in this infant is due to evening colic; since this complaint has been present since birth and there is no blood complaint in stools, we can rule out intussusception, which can occur as a side effect of rotavirus vaccination. Option B . MCC Of abdominal pain in infants 1-3 months of age is = Infantile/evening colic due to cow’s milk protein allergy. Option D. Recurrent abdominal pain in children stems from behavioural/emotional problems.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child of 3 years is brought to pediatric OPD with complaints of episodes of 6 loose stools a day, on examining the child, the child seems restless, his oral mucosa is dried, and his eyes are sunken. On offering water, the child drinks all of it eagerly; skin pinch takes &lt; 2 seconds; which of the following is appropriate based on the child’s current condition?", "options": [{"label": "A", "text": "Child is a case of Some dehydration and should be treated according to WHO Plan B", "correct": true}, {"label": "B", "text": "Child is a case of No dehydration and should be treated according to plan C", "correct": false}, {"label": "C", "text": "Child a case of Severe Dehydration should be treated according to WHO Plan A", "correct": false}, {"label": "D", "text": "Child is normal and requires no treatment and should be set back home", "correct": false}], "correct_answer": "A. Child is a case of Some dehydration and should be treated according to WHO Plan B", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Child is a case of Some dehydration and should be treated according to WHO Plan B Plan A [NO DEHYDRATION &lt;50ml/kg] PLAN B [SOME DEHYDRATION 50-100ML/KG] PLAN C [Severe Dehydration &gt;100ml/kg] No significant symtoms Restless Sunken eyes Drinks eagerly Skin pinch slow Lethargy Sunken eyes Not able to drink Skin pinch delayed Statement D. The child clearly has signs of some dehydration &amp; cant be sent home without appropriate treatment according to WHO PLAN B.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old child weighing 20 kg is brought to pediatric OPD by his mother with complaints of increased episodes of loose stools for the past 3 days. The child is not restless or lethargic. Oral mucosa is not dry; skin pinch goes back within 2 seconds. How will you calculate the amount of oral rehydration therapy? What does the child require based on his current status?", "options": [{"label": "A", "text": "50-100ml ORS / Loose stool should be administered to this child", "correct": false}, {"label": "B", "text": "Ad libitum 2000ml/day", "correct": false}, {"label": "C", "text": "100-200MLORS/ Loose stool", "correct": true}, {"label": "D", "text": "75ML ORS/KG/DAY Should be administered to this child", "correct": false}], "correct_answer": "C. 100-200MLORS/ Loose stool", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>100-200MLORS/ Loose stool 1000ML/DAY – IN A CHILD OF 2-10YRS OF AGE. is the amount of Oral Rehydration Solution-ORS needed in this child to overcome the electrolyte imbalance. Based on the history and examination, this child belongs to the PLAN A WHO- NO DEHYDRATION Category. This child belongs to PLAN A WHO-NO DEHYDRATION Category based on the history and examination. Statement A, B. ORT - in PLAN A WHO is based on age of child. &lt;2 years - 50-100ml ORS/LOOSE STOOL / 500ML/DAY 2-10YEARS- 100-200MLORS/LOOSE STOOL/ 1000ML/DAY &gt;10 years- AD libitum (means based on child's requirement)- 2000ml/day Statement D. 75 ML/KG is Correction dose of ORS required in a child that falls under category of PLAN B</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A, B. ORT - in PLAN A WHO is based on age of child. &lt;2 years - 50-100ml ORS/LOOSE STOOL / 500ML/DAY 2-10YEARS- 100-200MLORS/LOOSE STOOL/ 1000ML/DAY &gt;10 years- AD libitum (means based on child's requirement)- 2000ml/day Option D. 75 ML/KG is Correction dose of ORS required in a child that falls under category of PLAN B</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You are volunteering in a Pediatric health checkup camp organised by an NGO on the outskirts of a small village; a 2-year-old child is brought to you by his grandparents with complaints of increased irritability, decreased food intake and loose stools over the past 3 days, you examine the child seems extremely lethargic, does not drink water when offered, skin pinch goes back very slowly &gt;4 seconds, the oral mucosa is all dried up. What amount of fluids must be administered initially to the child to combat dehydration?", "options": [{"label": "A", "text": "IV RL IN 5% dextrose – 70ml/kg over 1 hour", "correct": false}, {"label": "B", "text": "IV RL IN 5% dextrose – 30ml/kg over 30 mins", "correct": true}, {"label": "C", "text": "IV NS 70 ML/KG over 5 hours", "correct": false}, {"label": "D", "text": "75 MG/KG of ORS in 2 hours", "correct": false}], "correct_answer": "B. IV RL IN 5% dextrose – 30ml/kg over 30 mins", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>IV RL IN 5% dextrose – 30ml/kg over 30 mins PLAN -C TREATMENT PROTOCOL FLUID OF CHOICE = IV FLUIDS [RL in 5 % Dextrose or Ringer lactate or NS] &lt;1 Year of age 30 ml/over 1 hour f/b 70ml/kg over 5 hours i.e 100ml/kg over 6 hours &gt;1 Year of age 30 ml/kg over 0.5 hour f/b 70 ml/kg over 2.5 hours i.e 100ml/kg over 3 hours</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Statement- A [ Assertion] – Antibiotics must be administered in all cases of diarrhoea in children of developing countries. Statement B- [Reasoning] Antibiotic administration since day 1 helps reduce hospital stays in patients with severe diarrhoea.", "options": [{"label": "A", "text": "Assertion is true; the reason is false", "correct": false}, {"label": "B", "text": "Assertion is false; the reason is false", "correct": true}, {"label": "C", "text": "Assertion is false; the reason is true", "correct": false}, {"label": "D", "text": "Both assertion and reason are true.", "correct": false}], "correct_answer": "B. Assertion is false; the reason is false", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Assertion is false; the reason is false Antibiotics are only used in cases of diarrhoea with evidence of bacterial infections. Non-judicial use of antibiotics is avoided.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Statement- A [ Assertion]- Zinc supplementation is part of standard care and ORS in children with acute diarrhoea. Statement B –[Reasoning] – Intestinal zinc lost during diarrhoea aggravates pre-existing zinc deficiency.", "options": [{"label": "A", "text": "Assertion is true; the reason is false", "correct": false}, {"label": "B", "text": "Assertion is false; the reason is false", "correct": false}, {"label": "C", "text": "Assertion is false; the reason is true", "correct": false}, {"label": "D", "text": "Both assertion and reason are true", "correct": true}], "correct_answer": "D. Both assertion and reason are true", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Both assertion and reason are true Zinc deficiency is found widespread among children in developing countries like India. Intestinal zinc losses during diarrhoea aggravate pre-existing zinc deficiency making Zinc supplementation a necessary part of standard care along with Oral rehydration solution ORS in children with acute diarrhoea. [ZINC DOSE = ACC TO WHO – Elemental Zinc dose = 20 mg/day in children &gt;6 months of age. ]</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old child with a history of loose stools was brought to the hospital. No history of fever or blood in stools. On examination, his abdomen was distended &amp; eyes were sunken. His mother says he is irritable and eagerly drinks water if given. What treatment is advised for this child?", "options": [{"label": "A", "text": "Give oral fluid therapy &amp; zinc supplementation and asks the mother to come back if danger signs develop.", "correct": true}, {"label": "B", "text": "Start IV fluids and IV antibiotics &amp; refer to a higher centre.", "correct": false}, {"label": "C", "text": "Give oral fluids &amp; ask the mother to continue the same and revisit the next day.", "correct": false}, {"label": "D", "text": "Wait &amp; observe.", "correct": false}], "correct_answer": "A. Give oral fluid therapy & zinc supplementation and asks the mother to come back if danger signs develop.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Give oral fluid therapy &amp; zinc supplementation and asks the mother to come back if danger signs develop. The child, in this case, has some degree of dehydration since the child is irritable, eagerly drinks water, and has sunken eyes. Treatment includes oral rehydration therapy, zinc supplementation and continued breastfeeding according to the WHO integrated Management of neonatal and childhood diseases(IMNCI) protocol. WHO IMNCI protocol: SIGNS CLASSIFY AS IDENTIFY TREATMENT (Urgent pre-referral treatments are in bold print) Two of the following signs: Lethargic or unconscious Sunken eyes Not able to drink or drinking poorly Skin pinch goes back very slowly SEVERE DEHYDRATION If child has no other severe classification Give fluid for severe dehydration (Plan C) OR If child also has another severe classification: Refer URGENTLY to hospital with mother giving frequent sips of ORS on the way. Advise the mother to continue breastfeeding. If child is 2 years or older, and there is cholera in your area, give antibiotic for cholera. Two of the following signs: Restless, imitable Sunken eyes Drinks eagerly, thirsty Skin pinch goes back slowly SOME DEHYDRATION Give fluid, Zinc supplements and food for some dehydration (Plan B) If Child also has a severe classification: Refer URGENTLY to hospital with mother giving frequent sips of ORS on the way. Advise the mother to continue breastfeeding. Advise mother when to retum immediately. Follow-up in 5 days if not improving. If confirmed symptomatic HIV, follow-up in 2 days if not improving. Not enough signs to classify as some or severe dehydration NO DEHYDRATION Give fluid, Zinc supplements and food to treat diarrhoea at home (Plan A) Advise mother when to return immediately. Follow-up in 5 days if not improving. If confirmed/symptomatic HIV, follow-up in 2 days if not improving. Treatment of dehydration based on severity: PLAN A For no dehydration or minimal dehydration. Such children are treated at home after explanation of feeding and danger signs to the mother. ORS is administered after each loose stool and danger signs includes increased frequency/volume of stools, repeated vomiting, increasing thrist, refusal to feed, fever or blood in stools. Oral rehydration therapy to prevent dehydration Age ORS or other culturally appropriate ORT fluids after each loose stool ORS to provide for use at home &lt;24 mo 50-100 mL 500 mL/day 2-10 yr 100-200 mL 1000 mL/day &gt;10 yr Ad lib 2000 mL/day Explain use of Ons, La. the amount to be given, how to mix Give a teaspoonful every 1-2 min for a child under 2 years Give frequent sips from a cup for an older ch If the child vomits, well for 10 min. Then give the solution more slowly (for example, a spoonful every 2-3 min Idiantes continues after the ORS packets are used up them to give other fluids as described above or retum for more ORS PLAN B For some or moderate dehydration. All cases with obvious signs of dehydration need to be treated in hospital or health center. Fluid requirement is calculated under following: The daily fluid requirements in children: Up to 10kg 100ml/kg 10-20kg 50ml/kg &gt;20kg = 20ml/kg Deficit replacement or rehydration therapy is calculated as: 75ml kg body weight (wt. 75) of ORS, to be given over 4 hours. If ORS cannot be taken orally, then nasogastric tube can be used. Maintenance fluid therapy to replace losses. This phase begins when signs of dehydration disappears, usually within 4hours. ORS should be administered to a maximum of 10ml/kg per stool. Breastfeeding and semisolid food are continued after replacement of deficit. PLAN C For severe dehydration. IV fluids should be started immediately using ringer lactate with 5% dextrose. AGE 30ml/kg 70ml/kg &lt;12 months 1hr 5hr &gt;12months 30min 21/2hr The child should be reassessed every 15-30mins for pulses and hydration status after the first bolus of 100ml kg of IV fluid. The child should be observed for at least 6hours before discharge, to confirm that the mother is able to maintain the child's hydration by giving ORS solution.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In a hospital, many cases of diarrhoea are admitted to the children's ward. The doctor monitors the diet of all children &amp; advises them to keep a fast on some days. The appropriate diagnosis would be?", "options": [{"label": "A", "text": "Persistent diarrhoea", "correct": false}, {"label": "B", "text": "Osmotic diarrhoea", "correct": true}, {"label": "C", "text": "Secretory diarrhoea", "correct": false}, {"label": "D", "text": "Infective diarrhoea", "correct": false}], "correct_answer": "B. Osmotic diarrhoea", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Osmotic diarrhoea Osmotic diarrhoea results from osmotically active, poorly absorbed solutes in the bowel lumen that inhibit normal water and electrolyte absorption. This type of diarrhoea ceases with fasting.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Options A . Persistent diarrhoea is defined as a diarrhoeal episode that lasts for &gt; 14 days. It is increasingly observed in children with malnutrition. These are due to infections commonly caused due entering adherent and enteroaggregative E-coli. The significant consequences are growth faltering, worsening malnutrition and death. Options C. In Secretory diarrhoea, the epithelial cell's ion transport processes are turned into a state of active secretion. The most common cause of acute-onset secretory diarrhoea is a bacterial infection of the gut. Options D. Infective diarrhoea, secretory diarrhoea, and dysentery occurs independent of dietary intake and do not subside with fasting.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old child with prolonged malnutrition presents with episodes of diarrhoea lasting for &gt;2weeks. The stool sample is positive for enteroadherent &amp; enteroaggregative E-coli. What is the likely diagnosis?", "options": [{"label": "A", "text": "Persistent diarrhoea", "correct": true}, {"label": "B", "text": "Acute diarrhoea", "correct": false}, {"label": "C", "text": "Chronic diarrhoea", "correct": false}, {"label": "D", "text": "Infective diarrhoea", "correct": false}], "correct_answer": "A. Persistent diarrhoea", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Persistent diarrhoea Persistent diarrhoea is defined as a diarrhoeal episode that lasts for &gt; 14 days. It is increasingly observed in children with malnutrition. These are due to infections commonly caused due to enter adherent and enteroaggregative E-coli. The significant consequences are growth faltering, worsening malnutrition and death. The presence of secondary lactose intolerance should be considered when the stools are explosive (i.e mixed with gas and passed with noise) and in presence of perianal excoriation. The principles of management are: Correction of dehydration, electrolytes and hypoglycemia; Evaluation for infections using investigations (hemograms, blood culture and urine culture) &amp; Nutritional therapy. Diets for persistent diarrhea Diet A (reduced lactose) Diet B (lactose free) Diet C (monosaccharide based) Constituents Milk (1/3 kator/50 mL) Puffed rice powder/cooked rice or soojl (2 tsp/6 g) Sugar (1½ tsp/7 g) Oil (1 tsp/4.5 g) Water (2/3 katori/100 mL) Egg white (3 tsp/half egg white) Puffed rice powder/cooked rice (3 tsp/9 g) Glucose (1½ tsp/7 g) Oil (1½ tsp/7 g) Water (3/4 kator/120 mL) Chicken puree (5 tsp/15 g) or egg white (3 tsp/half egg white) Glucose (1½ tsp/7 g) Oil (1½ tsp/7 g) Water (1 katori/150 mL) Preparation Mix milk, sugar and rice, add boiled water and mix well, add oil. After whipping the egg white, add rice, glucose and oil and mix well. Add boiled water and mix rapidly to avoid clumping Boll chicken and make puree after removing bones Mix it with glucose and oil. Add boiled water to make a smooth flowing feed Nutrient content 85 kcal and 2.0 g protein per 100 g. 90 kcal and 2.4 g protein per 100 g 67 kcal and 3.0 g protein per 100 g Causes of chronic diarrhea according to age of onset (In order of importance) Age &lt;6 months Age &gt;6 months to 5 years Age &gt;5 years Cow milk protein allergy Cow mlik protein allergy Cellac disease Lymphangiectasia Celiac disease Glardiasis Urinary tract infection\" Giardiasis Gastrointestinal tuberculosis Short bowel syndrome Toddler diarrhea Inflammatory bowel disease Immunodeficiency statos Lymphangiectasia Immunodeficiency Cystic fibrosis Short bowel syndromo* Bacterial overgrowth Anatomical defects Tuberculosis Lymphangiectasia Intractable diarrheas of infancy*** Inflammatory bowel disease Tropical sprue Microvillous inclusion disease Immunodeficiency Immunoproliferative small Tufting enteropathy Bacterial overgrowth intestinal disease Autoimmune enteropathy Pancreatic insufficiency Pancreatic Insufficiency Glucose galactose malabsorption Congenital sodium/chloride diarrhea Should be considered in young infants with chronic diarrhea, particularly i fever is noted Consider if there is antecedent history of small bowel surgery These rare conditions should only be considered if the diarrhea is very early in its onset (neonate to 3 months) and common conditions have been ruled out Statement D. Infective diarrhoea, secretory diarrhoea, dysentry occurs independent of dietary intake and do not subside with fasting. This type of diarrhoea is not so common and occurs depending upon type of infection.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which is the most common agent responsible for causing gastroenteritis in children under-5 the age group among all the cases conducted in a hospital survey?", "options": [{"label": "A", "text": "Shigella dysenteriae", "correct": false}, {"label": "B", "text": "Escherichia coli", "correct": false}, {"label": "C", "text": "Rotavirus", "correct": true}, {"label": "D", "text": "Adenovirus", "correct": false}], "correct_answer": "C. Rotavirus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rotavirus Rotavirus is the most common agent responsible for causing gastroenteritis in children under-5 the age It accounts for 29% of deaths caused by diarrhoea in children.</p>\n<p><strong>Highyeild:</strong></p><p>In rotavirus diarrhoea, vomiting is an early feature, and diarrhoea is more severe. Effective vaccines are now available against the commonest agent, i.e. rotavirus, and their use might be an effective strategy for preventing acute diarrhoea.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Options A . Shigella dysenteriae refers to the presence of grossly visible blood in the stools and is a consequence of colon infection by either bacteria like shigella, E-coli or amoeba. Bacillary dysentery is more common in children than amebic dysentery. A child with bacillary dysentery presents with fever and diarrhoea. The illness is complicated by dehydration, dyselectrolytemia, HUS, toxic megacolon, perforation and rectal prolapse. Options B . In Escherichia coli, enteroinvasive E-coli (EIEC) and enterohaemorrhagic E-coli (EHEC) can cause dysentery. EHEC may also cause the hemolytic uremic syndrome. pathogenic E-coli, especially the enteroaggregative and enteroadherent types, results in malabsorption by causing persistent infection. Options D. Adenovirus are common viruses that typically cause flu-like illness &amp; mild cold. It causes acute respiratory diseases, pneumonia, epidemic keratoconjunctivitis &amp; occasionally gastroenteritis. In infants, pharyngitis &amp; pharyngeal-conjunctival fever are common.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A Young child is admitted to the pediatric ward for persistent diarrhoea. Given below are the five important micronutrients. Which of these are the essential micronutrients given in this child with diarrhoea? Pottasium Zinc Vitamin a Magnesium Folic acid Select the correct answer from given below code:", "options": [{"label": "A", "text": "2 &amp; 3", "correct": true}, {"label": "B", "text": "2, 3 &amp; 4", "correct": false}, {"label": "C", "text": "1,4 &amp; 5", "correct": false}, {"label": "D", "text": "2 &amp; 5", "correct": false}], "correct_answer": "A. 2 & 3", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2 &amp; 3 The essential micronutrients are Zinc &amp; vitamin A(2 &amp; 3). Both of these micronutrients are essential for maintaining mucosal immunity. Vitamin A deficiency increases mortality from diarrhoea, measles, and malaria, while Zinc deficiency increases mortality from diarrhoea, pneumonia, and malaria. A single oral dose of vitamin A should be given routinely, at 2,00,000IU for children &gt; 12 months or 100,000IU for children 6-12 months. Zinc is recommended to be supplemented as sulfate, acetate or gluconate formulation at 20mg of elemental zinc per day for children &gt; 6 months for 14 days. Zinc supplementation is now a part of the standard care along with ORS in children with acute diarrhoea. Magnesium and Pottasium supplementation is provided to severely malnourished infants &amp; children. Magnesium is given by IM route at 0.2ml/kg/dose of 50% magnesium sulfate twice a day for 2-3 days. Pottasium is supplemented orally at 5-6meq/kg/day or as part of IV infusions during the initial stabilisation phase. Supplemental multivitamins and minerals, at about twice the RDA, should be given daily to all children for at least 2-4 weeks. Iron supplements should be introduced only after the diarrhoea has ceased. Recent studies also indicate the usefulness of folic acid in preventing diarrhoea.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old child is admitted with the diagnosis of gastroenteritis, along with fever, sunken eyes and reduced urine output suggestive of dehydration. Which type of acid-base imbalance is likely to be seen?", "options": [{"label": "A", "text": "Mild dehydration with acidosis", "correct": true}, {"label": "B", "text": "Mild dehydration with alkalosis", "correct": false}, {"label": "C", "text": "No dehydration with acidosis", "correct": false}, {"label": "D", "text": "No dehydration with alkalosis", "correct": false}], "correct_answer": "A. Mild dehydration with acidosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Mild dehydration with acidosis If the child has symptoms like pallor, laboured breathing, altered sensorium, seizures, paralytic ileus or oliguria, it suggests acid-base imbalance, dyselectrolytemia or renal failure. The acid-base balance most likely seen is No or isotonic dehydration with acidosis in children with viral enteritis.</p>\n<p><strong>Highyeild:</strong></p><p>Viruses that cause human diarrhoea selectively infect and destroy the villus tip cells in the small intestine. Selective viral infection of intestinal villus tip cells thus leads to decreased absorption of salt &amp; water (proportionate loss of salt &amp; water- isotonic dehydration) and an imbalance in the ratio of intestinal fluid absorption to secretion. Metabolic acidosis may be a result of stool bicarbonate. These can be seen due to secondary renal insufficiency or lactic acid as a sequela to diarrhoea.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Options B, C &amp; D. are acid-base imbalances not likely to be seen in gastroenteritis. It is rare.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old boy presented with diarrhoea, weight loss and abdominal pain for the past 2 months. His mother noticed the retardation of growth in the child. On serology, if was found ASCA antibodies (+) and endoscopy revealed the following finding as shown below. What is the most probable diagnosis?", "options": [{"label": "A", "text": "Carcinoma colon", "correct": false}, {"label": "B", "text": "Ulcerative colitis", "correct": false}, {"label": "C", "text": "Crohn's disease", "correct": true}, {"label": "D", "text": "Intestinal TB", "correct": false}], "correct_answer": "C. Crohn's disease", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884028328-QTDK036014IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Crohn's disease The most probable diagnosis is Crohn's disease, as shown in an endoscopy image showing a cobblestone appearance. Differentiation between Crohn's disease and ulcerative coltis Crohn's disease Ulcerative colitis Distribution Entire gastrointestinal tract Discontinuous lesions Colon only Continuous involvement Bloody dianhea Less common Common Abdominal pain Common Less common Growth failure Common Less common Perianal disease Abscess; fistulae Absent Serology Anti-Sacchromyces cerevisiae antibody (ASCA) positive Perinuclear anti-neutrophil cytoplasmic antibody (p-ANCA) positive Endoscopy Deep imegular serpigenous or aphthous ulcers with normal intervening mucosa (skip lesions) Granularity, loss of vascular pattern, friability and diffuse ulceration Histopathology Transmural Inflammation with non-caseating granuloma Mucosal disease with crypitis, crypt distortion, crypt abscess and goblet cell depletion</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Options A. Carcinoma colon presents with the following features:- Persistent change in bowel habits diarrhoea or constipation Change in consistency of stool Persistent pain and discomfort Tenesmus Unexplained weight loss For diagnosis, colonoscopy is done to check for colorectal polyps &amp; cancer. Options D. Intestinal TB involves the GIT, lymph nodes and solid viscera. It may be of ulcerative, hypertrophic or ulcero-hypertrophic type. The clinical features are: Chronic diarrhoea Subacute intestinal obstruction Ascites Lump in abdomen (ileocaecal mass) Systemic manifestations (fever, malaise, anorexia and weight loss) Colonoscopy shows classically transverse ulcers in the ascending colon/caecum and ulceration/stricture in terminal ileum.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year old child presents with complaints of bloody diarrhoea &amp; abdominal pain. On histopathology, fine mucosal granularity &amp; continuous inflammation of the colon are seen. The doctor advised to do Barium enema in the child, showing the finding as below. All of the following are features of crohn's disease except?", "options": [{"label": "A", "text": "Rectal sparing", "correct": false}, {"label": "B", "text": "Perianal fistulae", "correct": false}, {"label": "C", "text": "Transmural involvement", "correct": false}, {"label": "D", "text": "Lead-pipe appearance", "correct": true}], "correct_answer": "D. Lead-pipe appearance", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884028596-QTDK036015IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Lead-pipe appearance Here, in this case, the diagnosis is of Crohn's disease due to the presence of the above clinical &amp; histopathological features. On the Barium enema, the image is showing Lead-pipe appearance as seen in ulcerative colitis and thus it is not a feature of crohn's disease. This appearance is due to the loss of haustra in the diseased colonic segment. Differentiation between Crohn's disease and ulcerative coltis Crohn's disease Ulcerative colitis Distribution Entire gastrointestinal tract Discontinuous lesions Colon only Continuous involvement Bloody dianhea Less common Common Abdominal pain Common Less common Growth failure Common Less common Perianal disease Abscess; fistulae Absent Serology Anti-Sacchromyces cerevisiae antibody (ASCA) positive Perinuclear anti-neutrophil cytoplasmic antibody (p-ANCA) positive Endoscopy Deep imegular serpigenous or aphthous ulcers with normal intervening mucosa (skip lesions) Granularity, loss of vascular pattern, friability and diffuse ulceration Histopathology Transmural Inflammation with non-caseating granuloma Mucosal disease with crypitis, crypt distortion, crypt abscess and goblet cell depletion</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 25 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 15 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Which of the following is a Live vaccine?", "options": [{"label": "A", "text": "Yellow fever", "correct": true}, {"label": "B", "text": "Diphtheria", "correct": false}, {"label": "C", "text": "Pneumococcal vaccines", "correct": false}, {"label": "D", "text": "Hepatitis B", "correct": false}], "correct_answer": "A. Yellow fever", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Yellow fever Vaccines may be broadly classified as Live attenuated vaccines and killed/inactivated toxins/toxoids.</p>\n<p><strong>Highyeild:</strong></p><p>Live attenuated vaccines- Bacille Calmette-Guerin (BCG) BCG, Measles, Mumps, Rubella (MMR), Oral Polio Virus (OPV), Oral Typhoid Vaccine (Ty21a), Rotavirus, Intranasal Influenza, Hepatitis A, Yellow fever and chickenpox vaccines Killed vaccines may be Killed organisms- whole cell pertussis Toxoids- diphtheria toxoids, tetanus toxoids Subunit vaccines- Capsular polysaccharide- pneumococcal, typhoid (Vi) Conjugated – Pneumococcal, Meningococcal, Hib. Recombinant vaccines- Hep B, Papillomavirus vaccine, acellular pertussis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is not a live attenuated vaccine?", "options": [{"label": "A", "text": "Pertussis", "correct": true}, {"label": "B", "text": "Measles", "correct": false}, {"label": "C", "text": "Sabin polio vaccine", "correct": false}, {"label": "D", "text": "Bacille Calmette-Guerin (BCG)", "correct": false}], "correct_answer": "A. Pertussis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pertussis Vaccines may be broadly classified as Live attenuated vaccines and killed/inactivated toxins/toxoids.</p>\n<p><strong>Highyeild:</strong></p><p>Live attenuated vaccine Bacille Calmette-Guerin (BCG), Measles, Mumps, Rubella (MMR)Vaccine, Oral Polio Vaccine (OPV), Oral Typhoid Vaccine (Ty21a), Rotavirus, Intranasal Influenza, Hepatitis A, Yellow fever and chickenpox vaccines Killed vaccines may be Killed organisms- whole cell pertussis Toxoids- diphtheria toxoids, tetanus toxoids Subunit vaccines- Capsular polysaccharide- pneumococcal, typhoid (Vi) Conjugated – Pneumococcal, Meningococcal, Hib. Recombinant vaccines- Hep B, Papillomavirus vaccine, acellular pertussis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Polysaccharide vaccines will not be effective if given below what age?", "options": [{"label": "A", "text": "4 year", "correct": false}, {"label": "B", "text": "3 years", "correct": false}, {"label": "C", "text": "2 years", "correct": true}, {"label": "D", "text": "Can be given to all ages", "correct": false}], "correct_answer": "C. 2 years", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2 years These polysaccharide antigens mount a T cell-independent antibody response as compared to protein antigens. They do not stimulate cell-mediated immunity and hence do not have long-lasting immunity. So these types of vaccines are preferred at &gt; 2 years of age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following vaccines should be given through the intradermal route?", "options": [{"label": "A", "text": "Measles", "correct": false}, {"label": "B", "text": "Influenza", "correct": false}, {"label": "C", "text": "Fractional dose of the inactivated polio vaccine (FIPV)", "correct": true}, {"label": "D", "text": "Hepatitis B", "correct": false}], "correct_answer": "C. Fractional dose of the inactivated polio vaccine (FIPV)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Fractional dose of the inactivated polio vaccine (FIPV) Intradermal vaccines are Bacille Calmette-Guerin (BCG) and FIPV. It can be given over deltoid. MMR and Hep B are given through an intramuscular route in the anterolateral thigh.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are true about Bacille Calmette-Guerin (BCG) vaccine except:", "options": [{"label": "A", "text": "Intradermal injection at birth", "correct": false}, {"label": "B", "text": "Usually given over the right upper arm", "correct": true}, {"label": "C", "text": "Dosage is 0.05ml until 1 month", "correct": false}, {"label": "D", "text": "Catch-up vaccination can be given for up to 1 year as per the National schedule", "correct": false}], "correct_answer": "B. Usually given over the right upper arm", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Usually given over the right upper arm Bacille Calmette-Guerin (BCG)- given at birth, through an intradermal route in the left upper arm till 1 year of age. Dose- 0.1ml (0.05 ml until 1 month)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Hepatitis B vaccine at birth should ideally be given within how many hours of birth?", "options": [{"label": "A", "text": "12 hours", "correct": false}, {"label": "B", "text": "24 hours", "correct": true}, {"label": "C", "text": "72 hours", "correct": false}, {"label": "D", "text": "48 hours", "correct": false}], "correct_answer": "B. 24 hours", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>24 hours The Hepatitis B vaccine is recommended for all children at birth. The first dose should be administered as soon as possible after birth, preferably within 24 hours. Delay in administration &gt; 7 days is associated with higher rates of HbsAg acquisition in later childhood.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 13 years old girl was brought by her mother for HPV vaccination. There is a family history of cervical cancer in my maternal grandmother. How many doses should be given to this child?", "options": [{"label": "A", "text": "3 doses at 0,1,6 months", "correct": false}, {"label": "B", "text": "2 doses 6 months apart", "correct": true}, {"label": "C", "text": "3 doses 0,2,6 months", "correct": false}, {"label": "D", "text": "Single dose", "correct": false}], "correct_answer": "B. 2 doses 6 months apart", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2 doses 6 months apart Schedule for HPV vaccination: Between 9-14 years- 2 doses 6 months apart &gt; = 15 years- 3 doses 0,1,6 months (HPV 2) 0,2,6 months (HPV 4)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the recommended dosage interval for the varicella vaccine as per the current IAP immunisation schedule?", "options": [{"label": "A", "text": "1st dose at 15 months and 2nd dose at 5 years", "correct": false}, {"label": "B", "text": "1st dose at 15 months and 2nd dose at 18 months", "correct": true}, {"label": "C", "text": "1st dose at 9 months and 2nd dose at 18 months", "correct": false}, {"label": "D", "text": "Only single dose", "correct": false}], "correct_answer": "B. 1st dose at 15 months and 2nd dose at 18 months", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1st dose at 15 months and 2nd dose at 18 months Minimum age for varicella vaccine – 12 months Previously the dosage schedule was 1st dose at 15-18 months and 2nd dose at 4-6 years. It has recently been changed to 1st at 15 months and 2nd at 18 months. The second dose of varicella vaccine should preferably be administered 3-6 months after the first dose.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "How many booster doses of Inactivated Polio Vaccine (IPV) are recommended as per the recent Intra Abdominal Pressure (IAP) schedule?", "options": [{"label": "A", "text": "1 booster", "correct": false}, {"label": "B", "text": "2 boosters", "correct": true}, {"label": "C", "text": "3 boosters", "correct": false}, {"label": "D", "text": "No need for booster doses", "correct": false}], "correct_answer": "B. 2 boosters", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2 boosters Immunisation schedule of IPV: 3 primary doses of Inactivated Polio Vaccine (IPV) at 6,10,14 weeks With 1st booster at 15-18 months and the second booster at 4-6 years A booster of IPV at 4-6 years is the recent recommendation by (the Indian Academy Of Pediatrics) IAP</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are new vaccines recently approved by the government of India except:", "options": [{"label": "A", "text": "Tetraxim", "correct": false}, {"label": "B", "text": "Twinrab", "correct": false}, {"label": "C", "text": "Typhbar", "correct": true}, {"label": "D", "text": "Pneumosil", "correct": false}], "correct_answer": "C. Typhbar", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Typhbar New vaccines approved are</p>\n<p><strong>Highyeild:</strong></p><p>(Diphtheria, Tetanus, and Acellular pertussis) DTaP/ (Inactivated Polio Vaccine)IPV combination vaccine: Tetraxim Quadrivalent conjugate meningococcal vaccine: Menveo Monoclonal antibody cocktail for post-exposure prophylaxis of rabies: Twinrab Conjugate (CRM 197) typhoid vaccine: Typhi BEV 10-valent pneumococcal conjugate vaccine: Pneumosil</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Parents of a 6 weeks old baby come to the clinic for scheduled vaccination. Medical records of the baby show that he has inherited immunodeficiency. Which of the following can be administered to the baby?", "options": [{"label": "A", "text": "OPV-1", "correct": false}, {"label": "B", "text": "Pentavalent-1", "correct": true}, {"label": "C", "text": "Rota-1", "correct": false}, {"label": "D", "text": "MR-1", "correct": false}], "correct_answer": "B. Pentavalent-1", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pentavalent-1 The question is testing your knowledge of live attenuated, killed and toxoid vaccines.</p>\n<p><strong>Highyeild:</strong></p><p>Live vaccines are contraindicated in inherited and acquired immunodeficiency and during therapy with immunosuppressive drugs but may be given after a short course of low-dose steroids. Pentavalent vaccine consists of DTP, Hepatitis B and Hib vaccines. DTP consists of 20-30 Lf of Diphtheria toxin, 5-25 Lf of Tetanus Toxoid, and &gt; 4 IU of whole-cell killed pertussis. The Hepatitis B vaccine consists of HBsAg antigen produced by recombinant DNA technology in yeast. Hib vaccine contains the chief antigen as Hib capsular polysaccharide , polyribosylinositol phosphate (PRP), which is conjugated to tetanus toxoid.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. OPV is a live attenuated vaccine. Bivalent OPV contains OPV1 and OPV2 serotypes attenuated by a repeated passage in monkey kidney cell cultures. Option: C. Rota is a live attenuated vaccine. Option: D. MR is a live attenuated vaccine. The measles component is derived from the Edmonston Zagreb strain, and the Rubella component is derived from RA 27/3 strain</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Parents of a 6 weeks old baby come to the clinic for scheduled vaccination. Medical records of the baby show that he has inherited immunodeficiency. He was recently given low-dose steroids for 2 weeks. Which of the following cannot be administered to the baby?", "options": [{"label": "A", "text": "OPV-1", "correct": false}, {"label": "B", "text": "Pentavalent-1", "correct": false}, {"label": "C", "text": "Rota-1", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Option: B. Pentavalent vaccine consists of DTP , Hepatitis B and HibPRP-T vaccines. DTP consists of 20-30 Lf of Diphtheria toxin, 5-25 Lf of Tetanus Toxoid, and &gt; 4 IU of whole-cell killed pertussis. The Hepatitis B vaccine consists of HBsAg antigen produced by recombinant DNA technology in yeast. Hib vaccine contains the chief antigen as Hib capsular polysaccharide, polyribosylinositol phosphate (PRP), which is conjugated to tetanus toxoid. Option: A. OPV is a live attenuated vaccine. Bivalent OPV contains OPV1 and OPV2 serotypes attenuated by a repeated passage in monkey kidney cell cultures. Option: C. Rota is a live attenuated vaccine.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1.5-year-old child is brought to your clinic for immunisation. Parents were unaware of the vaccination schedule and have missed all routine vaccines since birth. Which vaccines can still be given according to the national immunisation schedule? I. bOPV II. BCG III. PCV IV. JE vaccine Select the correct answer from given below code:", "options": [{"label": "A", "text": "I, II, III, IV", "correct": false}, {"label": "B", "text": "I, III, IV", "correct": true}, {"label": "C", "text": "III, IV", "correct": false}, {"label": "D", "text": "Only I", "correct": false}], "correct_answer": "B. I, III, IV", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>I, III, IV I. Catch-up for bOPV is up to 5 years. II. BCG can be given up to 1 year III. PCV vaccine at 12-23 months of age can be given in two doses &gt; 8 weeks apart. IV. Catch-up for the JE vaccine is up to 15 years.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 9 month old infant is brought to the clinic for regular vaccination. According to the national immunisation schedule, she has been completely immunised before; hence, vaccines given at 9 months were administered. After 2 days, the child developed excessive crying, fever, and neck rigidity symptoms and was diagnosed with aseptic meningitis. Which of the following is responsible for causing the above symptoms?", "options": [{"label": "A", "text": "Japanese encephalitis vaccine", "correct": false}, {"label": "B", "text": "MMR vaccine", "correct": true}, {"label": "C", "text": "Pneumococcal vaccine", "correct": false}, {"label": "D", "text": "Bivalent oral polio vaccine", "correct": false}], "correct_answer": "B. MMR vaccine", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>MMR vaccine Adverse effects of the MMR vaccine are transient rash, arthralgia, aseptic meningitis, and lymphadenopathy.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Adverse effects of the Japanese encephalitis vaccine are fever, malaise, and hypersensitivity. Don’t get confused by the name that Japanese “encephalitis” can cause meningitis. It does not. Option: C. Adverse effects of the pneumococcal vaccine are fever, local pain, soreness, and malaise. Option: D. bOPV is not given at 9 months of age. It is administered at 6,10, and 14 weeks and a booster is given at 16-24 months. Adverse effects include vaccine-derived poliovirus and vaccine-associated paralytic poliomyelitis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-year-10-month-old baby is brought to the clinic for regular vaccination. Which of the following will be administered to the baby? i) DTP ii) bOPV iii) JE iv) MR v) IPV vi) PCV Select the correct answer from given below code:", "options": [{"label": "A", "text": "i, ii, iii, iv, vi", "correct": false}, {"label": "B", "text": "i, ii, iii, iv", "correct": true}, {"label": "C", "text": "ii, iii, vi", "correct": false}, {"label": "D", "text": "iii, iv, v, vi", "correct": false}], "correct_answer": "B. i, ii, iii, iv", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>i, ii, iii, iv This question tests your knowledge of the latest national immunisation schedule. According to the national immunisation schedule, 16-24 months vaccines include DTP-B1, bOPV-B, JE-2, and MR-2. Fractionated IPV is given at 10 weeks and 14 weeks Pneumococcal vaccine is given at 6 weeks, 14 weeks, and 9 months. National Immunization Schedule (NIS) for Infants, Children and Pregnant Women Vaccine When to give Dose Route Site For Pregnant Women TT-1 Early in pregnancy 0.5 ml Intra-muscular Upper Arm TT-2 4 weeks after TT-1* 0.5 ml Intra-muscular Upper Arm TT-Booster If received 2 TT doses in a pregnancy within the last 3 yrs* 0.5 ml Intra-muscular Upper Arm For Infants BCG At birth or as early as possible till one year of age 0.1ml (0.05ml until 1 month age) Intra-dermal Left Upper Arm Hepatitis B - Birth dose At birth or as early as possible within24 hours 0.5 ml Intra-muscular Antero-lateral side of mid-thigh OPV-0 At birth or as early as possible within the first 15 days 2 drops Oral Oral OPV 1, 2 &amp; 3 At 6 weeks, 10 weeks &amp; 14 weeks (OPV can be given till 5 years of age) 2 drops Oral Oral Pentavalent 1, 2 &amp; 3 At 6 weeks, 10 weeks &amp; 14 weeks (can be given till one year of age 0.5 ml Intra-muscular Antero-lateral side of mid-thigh Rotavirus# At 6 weeks, 10 weeks &amp; 14 weeks (can be given till one year of age 5 drops Oral Oral IPV Two fractional dose at 6 and 14 weeks of age 0.1 ml Intra dermal two fractional dose Intra-dermal: Right upper arm Measles /MR 1 st Dose$ 9 completed months-12 months. (can be given till 5 years of age) 0.5 ml Sub-cutaneous Right upper Arm JE - 1** 9 completed months-12 months 0.5 ml Sub-cutaneous Left upper Arm Vitamin A (1 st dose) At 9 completed months with measles Rubella 1 ml (1 lakh IU) Oral Oral For Children DPT booster-1 16-24 months 0.5 ml Intra-muscular Antero-lateral side of mid-thigh Measles/MR 2 nd dose $ 16-24 months 0.5 ml Sub-cutaneous Right upper Arm OPV Booster 16-24 months 2 drops Oral Oral JE-2 16-24 months 0.5 ml Sub-cutaneous Left Upper Arm Vitamin A*** (2 nd to 9 th dose 16-18 months. Then one dose every 6 months up to the age of 5 years. 2 ml (2 lakh IU) Oral Oral DPT Booster-2 5-6 years 0.5 ml. Intra-muscular Upper Arm TT 10 years &amp; 16 years 0.5 ml Intra-muscular Upper Arm Give TT-2 or Booster doses before 36 weeks of pregnancy. However, give these even if more than 36 weeks have passed. Give TT to a woman in labour, if she has not previously received TT. JE Vaccine is introduced in select endemic districts after the campaign. The 2 nd to 9 th doses of Vitamin A can be administered to children 1-5 years old during biannual rounds, in collaboration with ICDS. Phased introduction, at present in Andhra Pradesh, Haryana, Himachal Pradesh and Orissa from 2016 &amp; expanded in Madhya Pradesh, Assam, Rajasthan, and Tripura in February 2017 and planned in Tamil Nadu &amp; Uttar Pradesh in 2017. Phased introduction, at present in five states namely Karnataka, Tamil Nadu, Goa, Lakshadweep and Puducherry. (As of Feb' 2017)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 25 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 17 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 2-day-old neonate born to a diabetic mother had a blood glucose of 29mg/dl during a routine follow-up. The neonate is otherwise active and shows no signs or symptoms of hypoglycemia. What is the next management step?", "options": [{"label": "A", "text": "10% dextrose 2ml/kg iv bolus", "correct": false}, {"label": "B", "text": "5% dextrose 4ml/kg iv bolus", "correct": false}, {"label": "C", "text": "No management", "correct": false}, {"label": "D", "text": "Oral feeds and recheck sugar after 30 min", "correct": true}], "correct_answer": "D. Oral feeds and recheck sugar after 30 min", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Oral feeds and recheck sugar after 30 min Neonates with hypoglycemia can be both asymptomatic or can have symptoms (jitteriness, seizures, weak or high-pitched cry, refusal of feeds)</p>\n<p><strong>Highyeild:</strong></p><p>If the blood sugar is more than 20 mg/ dl (but less than 40 mg/dl) in an asymptomatic baby, a trial of oral feeds is given and blood sugar should be re-tested after 30--45 minutes. If repeat blood glucose is more than 40 mg/ dl, frequent feeding is ensured with 6 hourly monitoring of blood sugar for 48 hours. However, if blood sugar values persist below 40 mg/dl, the baby should receive an IV glucose infusion On the other hand, if initial blood glucose in an asymptomatic baby is less than 20 mg/dl, IV glucose is recommended All symptomatic neonates with hypoglycemia should receive IV glucose.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-day-old term newborn of a diabetic mother had seizures and was evaluated for the same. His blood glucose was 56 mg/dl; serum Na was 142meq/l, serum K was 3.8 mEq/l, and serum Ca was 6.2 mg/dl. What is the next immediate step in management?", "options": [{"label": "A", "text": "10% calcium gluconate 2ml/kg iv bolus", "correct": true}, {"label": "B", "text": "10% calcium gluconate 8ml/kg/day for 48 hours", "correct": false}, {"label": "C", "text": "3 ml/kg iv hypertonic saline", "correct": false}, {"label": "D", "text": "2 mg/kg KCL", "correct": false}], "correct_answer": "A. 10% calcium gluconate 2ml/kg iv bolus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>10% calcium gluconate 2ml/kg iv bolus This is a term neonate and since serum calcium is &lt; 8 mg/dl, the neonate is having Additionally, the neonate is symptomatic and has early-onset symptoms (within 96 hours of life)</p>\n<p><strong>Highyeild:</strong></p><p>Symptoms of hypocalcaemia are seizures, jitteriness, apnea, myoclonic jerks, exaggerated startle reflex. In this case, the baby is symptomatic hence iv 10% calcium gluconate 2ml/kg bolus mixed with 5% dextrose should be administered under cardiac monitoring ; subsequently 10% calcium gluconate 8 ml/kg/day for 48 hours, then reduce dose to half for next 48 hours and discontinue.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following congenital heart disease is most commonly seen in infants of diabetic mothers?", "options": [{"label": "A", "text": "Transposition of the great arteries(TGA)", "correct": false}, {"label": "B", "text": "Ventricular septal defect(VSD)", "correct": true}, {"label": "C", "text": "Autism spectrum disorder (ASD)", "correct": false}, {"label": "D", "text": "Patent ductus arteriosus(PDA)", "correct": false}], "correct_answer": "B. Ventricular septal defect(VSD)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ventricular septal defect(VSD) Infants of diabetic mothers are more prone to several complications.</p>\n<p><strong>Highyeild:</strong></p><p>These babies will usually be large for their gestational age / macrosomic. When the mother is diabetic, the high blood glucose in the mother gets transferred through the placenta and causes a hyperinsulinemic state in the fetus. Insulin is an anabolic hormone which causes rapid growth of the fetus. The most common congenital heart disease in infants of diabetic mothers is Ventricular septal defect (VSD), but Transposition of the great arteries (TGA) is the most specific cardiac anomaly and Autism spectrum disorder (ASD) is the least common. Hypertrophic cardiomyopathy characterized by the thickening of the interventricular septum / ventricular walls occurs more commonly in infants of mothers who are having pregestational diabetes mellitus.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the most specific neurological complication seen in infants of a diabetic mother?", "options": [{"label": "A", "text": "Caudal regression syndrome", "correct": true}, {"label": "B", "text": "Neural tube defects", "correct": false}, {"label": "C", "text": "Peripheral neuropathy", "correct": false}, {"label": "D", "text": "Myelomeningocele", "correct": false}], "correct_answer": "A. Caudal regression syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Caudal regression syndrome The most common system involved in an infant of a diabetic mother is the cardiovascular system. The most common neurological complication associated with infants of diabetic mothers is neural tube defects whereas the most specific neurological complication (and also overall most specific complication) is caudal regression syndrome .</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are complications seen in an infant of a diabetic mother except", "options": [{"label": "A", "text": "Hypercalcemia", "correct": true}, {"label": "B", "text": "Hyperbilirubinemia", "correct": false}, {"label": "C", "text": "Polycythemia", "correct": false}, {"label": "D", "text": "Hypoglycemia", "correct": false}], "correct_answer": "A. Hypercalcemia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hypercalcemia Complications seen in infants of diabetic mothers are Macrosomia/LGA- birth weight &gt; 90th centile Congenital malformations - CHD- VSD (MC), most specifically - TGA Neural tube defects (most common), caudal regression syndrome (most specific) Small left colon Polycythemia Renal vein thrombosis Jaundice Respiratory- hyaline membrane disease, transient tachypnea of the newborn Metabolic - hypoglycemia, hypocalcemia, and not hypercalcemia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term newborn baby born to an infant of a diabetic mother appears plethoric and has jitteriness. What are the criteria for this baby for polycythemia?", "options": [{"label": "A", "text": "Hb ≥ 15g/dl and Hct ≥ 60%", "correct": false}, {"label": "B", "text": "Hb ≥ 22g/dl and Hct ≥ 65%", "correct": true}, {"label": "C", "text": "Hb ≥ 20g/dl and Hct ≥ 70 %", "correct": false}, {"label": "D", "text": "Hb ≥ 25g/dl and Hct", "correct": false}], "correct_answer": "B. Hb ≥ 22g/dl and Hct ≥ 65%", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hb ≥ 22g/dl and Hct ≥ 65% Neonatal polycythemia is defined as a central hemoglobin or hematocrit (Hct) exceeding 2 standard deviations (SD) above the normal value for gestational and postnatal age. A full-term infant is therefore considered to have polycythemia when the hemoglobin concentration is ≥ 22 g/dL or Hct is ≥ 65%. Etiologies of neonatal polycythemia Causes of passive fetal RBC transfusion include delayed clamping of the umbilical cord (most common cause in term infants), twin-twin transfusion for the recipient, and rarely, maternal-fetal transfusions. Secondary to increased fetal erythropoiesis are post-term, Small for gestational age (SGA), infant of a diabetic mother, trisomy 18,13 or 21, adrenogenital syndrome, grave disease, hypothyroidism etc.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following tests are included in the sepsis screen except:", "options": [{"label": "A", "text": "Absolute Lymphocyte count", "correct": true}, {"label": "B", "text": "Total leukocyte counts", "correct": false}, {"label": "C", "text": "C-reactive protein (CRP)", "correct": false}, {"label": "D", "text": "Micro Erythrocyte sedimentation rate(ESR)", "correct": false}], "correct_answer": "A. Absolute Lymphocyte count", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Absolute Lymphocyte count Sepsis screen for diagnosing sepsis in neonates include TLC - &lt; 5000/mm3 Absolute neutrophil count- &lt; 1800/mm3 Immature to total neutrophil ratio &gt; 20% CRP &gt; 1mg/dl Micro ESR &gt; 15 mm in 1st hour</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term baby was born by normal vaginal delivery, cried at birth and shifted to the mother's side. By 12 hours of life, the baby was found to be lethargic, not sucking well, and had peripheral cyanosis; neonatal sepsis was suspected and investigations were sent. What is the most common organism that can cause sepsis in this baby?", "options": [{"label": "A", "text": "E coli", "correct": false}, {"label": "B", "text": "Coagulase-negative staphylococcus", "correct": false}, {"label": "C", "text": "Klebsiella", "correct": true}, {"label": "D", "text": "Streptococcus", "correct": false}], "correct_answer": "C. Klebsiella", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Klebsiella Sepsis occurring within 72 hours of birth is early-onset sepsis and that which occurs after 72 hours is late-onset sepsis.</p>\n<p><strong>Highyeild:</strong></p><p>In early-onset sepsis organisms of the maternal genital tracts are common such as Klebsiella, E. coli, Group B streptococcus, and Coagulase-negative staphylococci (CONS). Among these, Klebsiella is the most common organism. In late-onset sepsis, organisms from the external environment are the primary cause, including coagulase-negative staph, Staphylococcus and E Coli.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In the sepsis screen, the Immature to total neutrophil ratio is more than what percentage value is considered significant?", "options": [{"label": "A", "text": "10 Per cent", "correct": false}, {"label": "B", "text": "20 Per cent", "correct": true}, {"label": "C", "text": "25 Per cent", "correct": false}, {"label": "D", "text": "50 Per cent", "correct": false}], "correct_answer": "B. 20 Per cent", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>20 Per cent Sepsis screen includes TLC - &lt;5000/mm3 Absolute neutrophil count- &lt; 1800/mm3 Immature to total neutrophil ratio &gt; 20% CRP &gt; 1mg/dl MicroESR &gt; 15 mm in 1st hour</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15-day-old boy baby was brought to the nearby primary health care (PHC) with c/o not sucking well, and h/o excessive sleepiness for 1 day. On Examination RR-70/min, HR- 148/min, spo2- 95%, and mild subcostal and intercostal retractions were present. What is the next step in management as per Integrated Management of Neonatal and Childhood (IMNCI)?", "options": [{"label": "A", "text": "Start on Oral amoxicillin and review after 2 days", "correct": false}, {"label": "B", "text": "Start on iv ampicillin and gentamicin and review after 2 days", "correct": false}, {"label": "C", "text": "Give 1st dose of ampicillin and gentamicin and refer to higher centre", "correct": true}, {"label": "D", "text": "Refer immediately; not wait for antibiotics", "correct": false}], "correct_answer": "C. Give 1st dose of ampicillin and gentamicin and refer to higher centre", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Give 1st dose of ampicillin and gentamicin and refer to higher centre This baby has signs of possible serious infections hence should be referred urgently to the hospital after being given the first parenteral dose of ampicillin/ oral Amoxycillin plus gentamicin Prevent hypoglycemia, and advise the mother to keep the baby warm while arranging referral, and on the way to the hospital. Neonates with local bacterial infections like umbilical redness or pus draining from the umbilicus may be treated at home with oral antibiotics but should be seen in a follow-up after two days.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A mother brought her 4 days old newborn baby with complaints of white rashes over the nose and cheeks as shown below. What is the diagnosis?", "options": [{"label": "A", "text": "Ebstein Pearl’s", "correct": false}, {"label": "B", "text": "Milia", "correct": true}, {"label": "C", "text": "Pustular melanosis", "correct": false}, {"label": "D", "text": "Neonatal acne", "correct": false}], "correct_answer": "B. Milia", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883341207-QTDK017012IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Milia White-coloured pustules mainly on the face particularly the nose are called milia. These are distended sebaceous glands and are common skin lesions seen in neonates. These are benign.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term newborn baby has developed skin rashes as shown below on day 3 of life. What is the diagnosis", "options": [{"label": "A", "text": "Erythema toxicum", "correct": true}, {"label": "B", "text": "Erythema multiforme", "correct": false}, {"label": "C", "text": "Erythema migrans", "correct": false}, {"label": "D", "text": "Erythema marginatum", "correct": false}], "correct_answer": "A. Erythema toxicum", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883341276-QTDK017013IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Erythema toxicum Small, white papules on an erythematous base develop 2- 3 days after birth. Never on day 1. Most common erythematous rash in newborn It is a benign rash, resolves spontaneously It consists of eosinophils and is distributed on the face, trunk and extremities.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A post-term baby was born by the Lower segment cesarian section (LSCS). The doctor attending the delivery examined the baby and found a bluish skin patch on the lower back as shown below. What is the diagnosis?", "options": [{"label": "A", "text": "Nevus of Oto", "correct": false}, {"label": "B", "text": "Mongolian spots", "correct": true}, {"label": "C", "text": "Nevus of Ito", "correct": false}, {"label": "D", "text": "Incontinentia pigmenti", "correct": false}], "correct_answer": "B. Mongolian spots", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883341342-QTDK017014IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Mongolian spots Mongolian spots are slate- blue well demarcated areas of pigmentation seen more commonly in the lumbosacral region.</p>\n<p><strong>Highyeild:</strong></p><p>They are primarily composed of melanocytes. They usually disappear within 1 year of age. Doesn't require any treatment.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 39 weeks term baby was born by normal vaginal delivery and cried at birth. The child’s birth weight was 2kgs. On Examination, the baby had the following skin change. What is the diagnosis?", "options": [{"label": "A", "text": "Erythema toxicum", "correct": false}, {"label": "B", "text": "Harlequin color change", "correct": true}, {"label": "C", "text": "Portwine stain", "correct": false}, {"label": "D", "text": "Hemangioma", "correct": false}], "correct_answer": "B. Harlequin color change", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883341457-QTDK017015IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Harlequin color change An extraordinary division of the body from the forehead to the pubis into red and pale halves is called a harlequin colour change. It is usually a transient and harmless condition It is due to immature autonomic control . No investigations usually are required unless the phenomenon persists or is recurrent.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "During a routine newborn examination, you notice a swelling over the baby’s scalp as shown below. This swelling developed immediately after birth. On examination, palpation swelling is soft and crosses the suture line. What is the diagnosis?", "options": [{"label": "A", "text": "Caput succedaneum", "correct": true}, {"label": "B", "text": "Subgaleal hemorrhage", "correct": false}, {"label": "C", "text": "Cephalhematoma", "correct": false}, {"label": "D", "text": "Craniotabes", "correct": false}], "correct_answer": "A. Caput succedaneum", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883341486-QTDK017016IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Caput succedaneum CAPUT SUCCEDANEUM : Fluid between the skin and periosteum appears at birth and disappears in 2-3 days. Crosses the suture line. CEPHALHEMATOMA Well-circumscribed blood-filled swelling that does not cross suture lines. Bleeding between the periosteum and bone. It is not present at birth but gradually develops over a few hours after birth. Takes 3- 6 weeks to resolve.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following findings is seen in a preterm baby?", "options": [{"label": "A", "text": "Instant ear recoil", "correct": false}, {"label": "B", "text": "Slow ear recoil", "correct": true}, {"label": "C", "text": "Breast bud 5-10 mm", "correct": false}, {"label": "D", "text": "Breast bud &gt; 10mm", "correct": false}], "correct_answer": "B. Slow ear recoil", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Slow ear recoil TERM PRETERM Dry, pink skin Smooth, shiny skin Instant ear recoil Slow ear recoil Soles deep creases Soles superficial creases Lanugo hairs sparse/absent Lanugo hair abundant Breast bud 5-10 mm Breast bud&gt;10mm</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following scores is used to assess the gestational maturity of the child?", "options": [{"label": "A", "text": "Modified Ballard score", "correct": true}, {"label": "B", "text": "Appearance, pulse, grimace, and respiration (APGAR) score", "correct": false}, {"label": "C", "text": "Face, legs, activity, cry, consolability (FLACC) score", "correct": false}, {"label": "D", "text": "Silverman’s score", "correct": false}], "correct_answer": "A. Modified Ballard score", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Modified Ballard score A modified Ballard score is used to assess gestational maturity. Used to measure from 20 weeks to 44 weeks. Assessment of 12 criteria in total- 6 neuromuscular maturity criteria and 6 physical maturity criteria. Skin Sticky, friable. transparent Gelatinous, red, translucent Smooth, pink: visible veins Superficial pooling and/or rash; few veins Cracking. pale areas; rare veins Parchment, deep cracking: no vessels Lanugo None Sparse Abundant Thinning Bald areas Mostly bald Plantar surface Heel-toe 40-50 mm -1 40 mm:-2 &gt;50 mm, no crease Faint red marks Anterior trans- verse crease only Creases anterior 2/3 Creases over entire sole Breast Imperceptible Barely perceptible Flat areola, no bud Stippled areola, 1-2 mm bud Raised areola, 3-4 mm bud Full areola, 5-10 mm bud Eye/Ear Lids fused loosely:-1 tightly-2 Lids open; pinna flat stays folded Slightly curved pinna: soft, slow recoil Well curved pinna: soft but ready recoil Formed and firm. instant recoil Thick cartilage. ear stuff Genitals (male) Scrotum flat. smooth Scrotum empty. faint rugae Testes in upper canal, rare rugae Testes de- scending. few rugae Testes down, good rugae Testes pendu- lous. deep rugae Genitals (female Clitoris prominent. labia flat Clitoris prominent, labia minora Clitoris prominent, enlarging minora Majora and minora equally prominent Majora large minora small Majora cover clitoris and minora Maturity Rating Score Weeks -10 20 -5 22 O 24 5 26 10 28 15 30 20 32 25 34 30 36 35 38 40 40 45 42 50 44</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 27 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 13 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Which of the following is helpful in antenatal diagnosis of Neural Tube Defects (NTD)?", "options": [{"label": "A", "text": "Acetylcholinesterase", "correct": true}, {"label": "B", "text": "Brain natriuretic peptide (BNP)", "correct": false}, {"label": "C", "text": "Procalcitonin", "correct": false}, {"label": "D", "text": "C-Reactive Protein(CRP)", "correct": false}], "correct_answer": "A. Acetylcholinesterase", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Acetylcholinesterase Acetylcholinesterase is the most specific and the best marker for antenatal diagnosis of NTD. It is found in the amniotic fluid. Alpha-fetoprotein is also a marker of NTD (most sensitive) C-reactive protein CRP is a marker of inflammation. Brain natriuretic peptide BNP is a natriuretic peptide that helps diagnose heart failure. Procalcitonin is a marker of infection.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Identify the following sign", "options": [{"label": "A", "text": "Banana sign", "correct": false}, {"label": "B", "text": "Lemon sign", "correct": true}, {"label": "C", "text": "Spalding sign", "correct": false}, {"label": "D", "text": "Salt and pepper skull", "correct": false}], "correct_answer": "B. Lemon sign", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884574012-QTDK048002IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Lemon sign The lemon sign is shown in the picture. Lemon and banana signs can be seen in Ultrasonography (USG) of Neural tube defect (NTD) patients. The Spalding sign denotes fetal death. Salt and pepper skull can be seen in hyperparathyroidism.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Match the following Select the correct answer from the given below code:", "options": [{"label": "A", "text": "A3, B2, C4, D1", "correct": true}, {"label": "B", "text": "A1, B2, C3, D4", "correct": false}, {"label": "C", "text": "A4, B2, C1, D3", "correct": false}, {"label": "D", "text": "A2, B4, C3, D1", "correct": false}], "correct_answer": "A. A3, B2, C4, D1", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1690969986724-QTDK048003IMG1.JPG", "https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1689445342039-QTDK048003IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>A3, B2, C4, D1 Premature fusion of skull sutures can lead to abnormal head shapes. Premature fusion of a)Saggital suture Dolichocephaly b)Metopic suture Trigonocephaly c) Both Coronal sutures Brachycephaly d) One coronal suture Anterior plagiocephaly e) One lambdoid suture Posterior plagiocephaly When multiple sutures fuse, it is called Turricephaly, and Turricephaly associated with the cone-shaped head is called acrocephaly.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is associated with craniosynostosis?", "options": [{"label": "A", "text": "Carpenter syndrome", "correct": true}, {"label": "B", "text": "Down syndrome", "correct": false}, {"label": "C", "text": "Klinefelter syndrome", "correct": false}, {"label": "D", "text": "Sturge-Weber Syndrome", "correct": false}], "correct_answer": "A. Carpenter syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Carpenter syndrome Important Syndromes associated with craniosynostosis: Carpenter syndrome Apert syndrome Crouzon syndrome Pfeiffer syndrome</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Identify the following condition", "options": [{"label": "A", "text": "Spina bifida occulta", "correct": false}, {"label": "B", "text": "Myelomeningocele", "correct": false}, {"label": "C", "text": "Encephalocele", "correct": true}, {"label": "D", "text": "Meningocele", "correct": false}], "correct_answer": "C. Encephalocele", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884574262-QTDK048005IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Encephalocele Encephalocele is a closed, midline bony defect in the calvaria with herniation of the brain and meninges. The most common is the occipital lobe herniates.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A . Spina bifida occulta refers to the failure of bony fusion of the vertebral column that is covered by skin with or without an overlying tuft of hair Option B . Meningomyelocele refers to the herniation of meninges and neural tissue through an open spinal defect. Option D. Meningocele refers to bulging out of meninges through an open bony defect.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2.8 kg male baby is born to a 28 yrs old G2P2 mother by normal vaginal delivery. The baby was diagnosed with spina bifida occulta. What is the dose of folic acid to be recommended for this mother in her next pregnancy?", "options": [{"label": "A", "text": "4ug", "correct": false}, {"label": "B", "text": "40ug", "correct": false}, {"label": "C", "text": "400ug", "correct": false}, {"label": "D", "text": "4000ug", "correct": true}], "correct_answer": "D. 4000ug", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>4000ug As a newborn in this pregnancy is diagnosed with spina bifida occulta – so secondary prevention is needed in the subsequent So the mother should be advised to take 4mg of folic acid daily one month before conception. For the prevention of neural tube defects All women of childbearing age who can become pregnant take 0.4 mg of folic acid daily. If, however, a pregnancy is planned in high-risk women (previously affected children), supplementation should be started with 4 mg of folic acid daily, beginning one month before the planned conception. Maternal periconceptional use of folic acid supplementation reduces the incidence of NTDs in at-risk pregnancies by at least 50%. To be effective, folic acid supplementation should be initiated before conception and continued until at least the 12th wk of gestation when neurulation is complete.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "As an intern, you are posted in the obs and gyne department. while sitting in opd, you came across 25 yrs old married female who had come for preconception counseling. What advice should you give to this patient?", "options": [{"label": "A", "text": "Start folic acid @ 0.4mg/day", "correct": true}, {"label": "B", "text": "Start oral calcium", "correct": false}, {"label": "C", "text": "Start folic acid @ 4mg/day", "correct": false}, {"label": "D", "text": "Start oral iron", "correct": false}], "correct_answer": "A. Start folic acid @ 0.4mg/day", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Start folic acid @ 0.4mg/day For the prevention of neural tube defects All women of childbearing age who can become pregnant take 4 mg of folic acid daily. If, however, a pregnancy is planned in high-risk women (previously affected children), supplementation should be started with 4 mg of folic acid daily, beginning one month before the planned conception.</p>\n<p><strong>Highyeild:</strong></p><p>Maternal periconceptional use of folic acid supplementation reduces the incidence of NTDs in pregnancies at risk by at least 50%. To be effective, folic acid supplementation should be initiated before conception and continued until at least the 12th wk of gestation when neurulation is complete.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "As an intern, you are posted in the labor room. You conducted a normal vaginal delivery of an unbooked 26yrs old female whose baby has an anomaly (as shown in image). This newborn is suffering from which congenital anomaly?", "options": [{"label": "A", "text": "Meningomyelocele", "correct": false}, {"label": "B", "text": "Encephalocele", "correct": false}, {"label": "C", "text": "Anencephaly", "correct": false}, {"label": "D", "text": "Craniorachisis", "correct": true}], "correct_answer": "D. Craniorachisis", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884574381-QTDK048008IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Craniorachisis As in the image, cranial as well as spinal defect is seen – so this type of neural tube defect is known as craniorachisis</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A . Meningomyelocele- Protrusion of meninges along with some neural element from the posterior vertebral body defect Most severe form Commonest site- Lumbosacral region (75%) Never associated with spasticity Option B . encephalocele- Protusion of brain tissue (cerebral cortex, cerebellum or brain stem) through a cranial defect Option C. Anencephaly- distinctive appearance with a large defect of calvarium, meninges, and scalp associated with a rudimentary brain, Failure of development of cerebral hemisphere and cerebellum. only a residue of the brainstem can be identified</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 26 yrs old pregnant female presented in obs and gyne opd with ultrasound at 13 weeks gestation. Ultrasound shows a banana sign. what is the most specific marker in amniotic fluid in this patient?", "options": [{"label": "A", "text": "Alpha Feto Protein", "correct": false}, {"label": "B", "text": "Acetylcholinesterase", "correct": true}, {"label": "C", "text": "Unconjugated Estradiol", "correct": false}, {"label": "D", "text": "Beta Hcg", "correct": false}], "correct_answer": "B. Acetylcholinesterase", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Acetylcholinesterase Banana sign in ultrasound is indicative of neural tube defect</p>\n<p><strong>Highyeild:</strong></p><p>In 3rd wk of embryonic development, the invagination of the neural groove is completed, and the neural tube is formed by separation from the overlying surface ectoderm Initial closure of the neural tube is accomplished in the area corresponding to the future junction of the spinal cord and medulla and rushes caudally and rostrally. The neural tube is open at both ends for a brief period, and the neural canal communicates freely with the amniotic cavity. Failure of closure of the neural tube allows the excretion of fetal substances (α-fetoprotein [AFP], acetylcholinesterase) into the amniotic fluid, serving as biochemical markers for an NTD. Prenatal screening of maternal serum for AFP in the 16th-18th weeks of gestation effectively identifies pregnancies at risk for fetuses with NTDs in utero.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10 months old infant presented with the following anomaly( as shown in the image). Which of the following statements are true about this condition? it is less commonly associated with spasticity associated with Arnold Chiari type 1 malformation lumbosacral is the most common location meninges protrude along neural element Select the correct answer from the given below code:", "options": [{"label": "A", "text": "1,2,3", "correct": false}, {"label": "B", "text": "1,2,4", "correct": false}, {"label": "C", "text": "2,3,4", "correct": false}, {"label": "D", "text": "1,3,4", "correct": true}], "correct_answer": "D. 1,3,4", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884574687-QTDK048010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,3,4 THE ABOVE IMAGE SHOWS MENINGOMYELOCELE Myelomeningocele Protrusion of meninges along with some neural element Most severe form Commonest site- Lumbosacral region(75%) Clinical presentation depends on the site of the defect. It is never associated with spasticity. Sacral-bladder and bowel incontinence with perianal anesthesia Mid lumbar – flaccid paralysis of the lower limb, urinary dribbling, relaxed anal sphincter, and lower limb deformities Hydrocephalus is commonly seen and is associated with Arnold chairi type II malformation Treatment-surgical repair of the defect within a day or so after birth</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant presented in pediatric opd with complaints of abnormal head shape ( as shown in the image). A diagnosis of craniosynostosis is made. this type of skull shape is caused by the closure of which suture?", "options": [{"label": "A", "text": "Sagittal", "correct": true}, {"label": "B", "text": "coronal", "correct": false}, {"label": "C", "text": "metopic", "correct": false}, {"label": "D", "text": "lambdoid", "correct": false}], "correct_answer": "A. Sagittal", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884574987-QTDK048011IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Sagittal The above image shows dolichocephaly which is due to premature closure of the sagittal suture. Craniosynostosis- Premature closure of cranial sutures Various forms of craniosynostosis Dolichocephaly/ scaphocephaly sagittal suture Trigonocephaly Metopic sutures Brachycephaly Bicoronal synostosis Oxycephaly Both coronal and sagittal sutures Plagiocephaly Asymmetrical distortion/flattening of one side of the skull</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "As an intern, you are posted in the labor room. you conducted a normal vaginal delivery of an unbooked 26yrs old female whose baby has an anomaly(as shown in the image). This newborn is suffering from which congenital anomaly?", "options": [{"label": "A", "text": "Anencephaly", "correct": false}, {"label": "B", "text": "Encephalocele", "correct": false}, {"label": "C", "text": "Holoprosencephaly", "correct": true}, {"label": "D", "text": "Iniencepahly", "correct": false}], "correct_answer": "C. Holoprosencephaly", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1725359079107-photos-1725270862062-QTDK048013IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Holoprosencephaly Above image shows alobar holoprosencephaly Holoprosencephaly Failure of brain to divide into right and left hemisphere Holoprosencephaly is a developmental disorder of the brain that results from defective formation of the prosencephalon and inadequate induction of forebrain structures. The abnormality, which represents a spectrum of severity, is classified into three groups: alobar, semilobar, and lobar, depending on the degree of the cleavage abnormality Facial abnormalities, including cyclopia, synophthalmia, cebocephaly, single nostril, choanal atresia, solitary central incisor tooth, and premaxillary agenesis are common in severe cases</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. Encephalocele - Protusion of brain tissue(cerebral cortex,cerebellum or brain stem) through a cranial defect Option C. Anencephaly - distinctive appearance with a large defect of calvarium, meninges, and scalp associated with a rudimentary brain Failure of development of cerebral hemisphere and cerebellum. only a residue of the brainstem can be identified Option D. Iniencephaly - Accentuated retroflexion of neck, varying degree of defect in occiput and upper spine and nearly absent neck</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-month-old infant presented with complaints of swelling in the back of the baby. On examination, the resident doctor noticed a meningomyelocele with leaking of CSF. So immediate surgery is planned for the patient. till the patient is waiting for surgery, the covering of the sac will be protected by gauze soaked in:", "options": [{"label": "A", "text": "Tincture iodine", "correct": false}, {"label": "B", "text": "Mercurochrome", "correct": false}, {"label": "C", "text": "Methylene blue", "correct": false}, {"label": "D", "text": "Normal saline", "correct": true}], "correct_answer": "D. Normal saline", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Normal saline Meningomyelocele is covered with sterile saline-soaked gauze to prevent it from dying, causing trauma and infection. Myelomeningocele Protrusion of meninges along with some neural element Most severe form Commonest site- Lumbosacral region(75%) Clinical presentation depends on the site of the defect It is never associated with spasticity Hydrocephalus is commonly seen and is associated with Arnold chairi type II malformation. Treatment-surgical repair of the defect within a day or so after birth If a CSF leak is present- send samples for cultures and start iv antibiotics- require urgent treatment Management of hydrocephalus by VP Shunt</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 23 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 9 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "On taking clinical rounds, in a pediatric ward , you came across a few suspected JUVENILE IDIOPATHIC ARTHRITIS patients. As per ILAR criteria, which of the following patient would you not include under JUVENILE IDIOPATHIC ARTHRITIS (JIA)? ILAR: INTERNATIONAL LEAGUE OF ASSOCIATIONS FOR RHEUMATOLOGY", "options": [{"label": "A", "text": "A 5-Year-Old Girl With Persistant Oligoarthritis", "correct": false}, {"label": "B", "text": "A 16-Year-Old Girl With Rf Negative Polyarthritis", "correct": false}, {"label": "C", "text": "A 10- Year- Old Boy With Enthesitis-Related Arthritis", "correct": false}, {"label": "D", "text": "A 14-Year-Old Boy With Reactive Arthritis", "correct": true}], "correct_answer": "D. A 14-Year-Old Boy With Reactive Arthritis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>A 14-Year-Old Boy With Reactive Arthritis A 14-year-old boy with reactive arthritis is not a subtype of JIA as according to ILAR criteria , JIA is a group of conditions characterized by chronic inflammatory changes of the joints. it is defined as arthritis of 1 or more joints with onset below 16 years of age and persisting for atleast 6 weeks.</p>\n<p><strong>Highyeild:</strong></p><p>It has the following subtypes : Systemic Oligoarthritis - (a) persistent (b) extended Polyarthritis - (a) RF factor +ve (b) RF factor -ve Psoriatic arthritis Enthesitis-related arthritis Undifferentiated arthritis Reactive arthritis is not as common in children as in adults. it is diagnosed by BERLIN'S criteria, which are : Peripheral arthritis (usually lower limb, asymmetric oligoarthritis) Evidence of preceding GIT/GUT infection ( shigella, chlamydia ) in absence of clinical symptoms Exclusion of other arthritides</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Presents with A 5-year-old girl with persistant oligoarthritis . it is the most frequent type of JIA. 4 or fewer joints are affected during the first 6 months of the joint swelling is the usual complaint . it is more common in young girls, typically 3-5 years of age. Option: B. Presents with A 16-year-old girl with RF-negative polyarthritis . this subtype may occur at any age in childhood, more common in girls. joint pain usual complaint. small joints of hands and feet are less commonly involved and rheumatoid nodules are not seen. Option: C. Presents with A 10-year-old boy with enthesitis-related arthritis. this condition is more common in boys, typically older than 8 years. asymmetric large joints (knee, ankle, hip ) involvement of lower extremity is characteristic. many children are HLA B 27 +ve.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You are appointed as a senior doctor in one of the medical camps held far away from your hospital. you noticed many mothers brought their children with complaints of pain in movement and limitation of range of motion. based on these complaints, you diagnosed that one of the most common Rheumatic diseases in these children is?", "options": [{"label": "A", "text": "Juvenile Idiopathic Arthritis (Jia)", "correct": true}, {"label": "B", "text": "Acute Rheumatic Fever", "correct": false}, {"label": "C", "text": "Juvenile Ankylosing Spondylitis", "correct": false}, {"label": "D", "text": "Polyarteritis Nodosa", "correct": false}], "correct_answer": "A. Juvenile Idiopathic Arthritis (Jia)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Juvenile Idiopathic Arthritis (Jia) The most common Rheumatic disease in children is JIA.</p>\n<p><strong>Highyeild:</strong></p><p>JIA is a group of conditions characterized by chronic inflammatory changes in the joints. it is defined as arthritis of 1 or more joints with onset below 16 years of age and persisting for atleast 6 weeks. Features of arthritis : ( atleast 2 should be present ) Limitation of range of motion Pain Tenderness Increased heat</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Is ACUTE RHEUMATIC FEVER , which is an immunological disorder initiated by group A beta hemolytic streptococci. it mostly affects age group of 5-15 years with clinical features of : Streptococcal pharyngitis with fever f/b 10 days to a few weeks later by the reoccurrence of fever History of soar throat It is diagnosed by Revised JONES criteria. Major criteria Carditis Polyarthritis Chorea Erythema marginatum Subcutaneous nodules Minor criteria Clinical Arthralgia Fever Laboratory Elevated ESR/CRP First degree atrioventricular block Option: C. Is JUVENILE ANKYLOSING SPONDYLITIS, which is a type of chronic arthritis occuring for &gt; 6 weeks. it affects the spine and places where the muscles and ligaments are attached to the bone. symptoms can include pain and stifness in the back, joints, buttocks, thighs and shoulders. it typically occurs in morning in the form of morning stiffness. pain in back, buttocks improves with activity. Option: D. POLYARTERITIS NODOSA is rare in childhood. classification criteria for childhood PAN : atleast 2 should be present Skin involvement Myalgia / muscle tenderness Systemic hypertension Abnormal urine analysis or impaired renal function Mono or poly neuropathy Testicular pain / tenderness Signs/symptoms suggestive of vasculitis of any major organ system. ( GIT, CARDIAC, PULMONARY, CNS) Classification criteria for childhood polyartritis nodosa: A childhood illness characterized by the presence of either a Biopsy showing small and mid-size artery necrotizing vasculitis or angiographic abnormalities (aneurysms or occlusions), plus at least 2 of the following: Skin involvement Myalgia or muscle tenderness Systemic hypertension Abnormal urinalysis and/or impaired renal function Mononeuropathy or polyneuropathy Testicular pain or tenderness Signs or symptoms suggesting vasculitis of any other major organ systems (gastrointestinal, cardiac, pulmo- nary or central nervous system) Should include conventional angiography if magnetic resonance Angiography is negative</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Rohan is a school-going kid. He has been brought to the pediatrics opd by his mother due to complaints of fever persisting for 2 weeks which is more prominent in the evening with characteristic twice daily peak. fever is also accompanied by an evanescent rash, generalized lymphadenopathy, and hepatosplenomegaly. the rash decreases with the subsidence of fever and the child shows marked irritability. which of the following pattern of fever characteristically refers to the child's condition?", "options": [{"label": "A", "text": "Continuous Fever", "correct": false}, {"label": "B", "text": "Step Ladder Pattern Fever", "correct": false}, {"label": "C", "text": "Quotidian Fever", "correct": true}, {"label": "D", "text": "Quarter Fever", "correct": false}], "correct_answer": "C. Quotidian Fever", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Quotidian Fever The patient has clinical features suggestive of systemic JIA. type of fever pattern seen in JIA is quotidian fever. this fever is a type of fever that occurs every day that is</p>\n<p><strong>Highyeild:</strong></p><p>A fever that rises to more than 37 C in a day and returns to the baseline of 37 C on the same day within a few hours, and between fever peaks. it is seen in patients with systemic JIA, and mixed malarial infections. systemic JIA is characterized by fever with twice daily peak and arthritis in 2 or more joints + atleast 1 of the following : Evanescent rash- salmon rash Generalized lymphadenopathy Hepatosplenomegaly Serositis</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Is continuous fever which is defined as fever in which the temperature does not touch the baseline and remains above the normal of &gt; 37 C throughout the day. this pattern of fever is seen in conditions like gram -ve pneumonia , lobar pneumonia, bacterial meningitis, and UTI. Option: B. Is stepping ladder pattern fever which is defined as a fever that rises 1 day, falls the subsequent morning, and continues to form peaks and troughs with insidious onset. this type of fever is typically seen in the case of typhoid or enteric fever caused by S. typhi . also associated with Abdominal pain. Option: D. Is quarter fever which is defined as a fever that occurs every 4th day or for 3-4 days. it occurs usually in patients infected by female anopheles mosquitoes causing P.malarie.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 12-year-old girl presented to the pediatric opd with complaints of swelling of fingers and toes, and pitting of nails. on taking a family history, her mother told about similar complaints in her 2 years back. the girl also mentioned pain in her joints arms and legs. on examination, there was a pain in the DIP, PIP, and MCP joints. which of the following is the correct diagnosis by the features present in this girl?", "options": [{"label": "A", "text": "Psoriatic Arthritis", "correct": true}, {"label": "B", "text": "Rheumatoid Arthritis", "correct": false}, {"label": "C", "text": "Jia", "correct": false}, {"label": "D", "text": "Oligoarthritis", "correct": false}], "correct_answer": "A. Psoriatic Arthritis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Psoriatic Arthritis Psoriatic arthritis is set to be present when there is arthritis in association with psoriasis.</p>\n<p><strong>Highyeild:</strong></p><p>Dactylitis Nail pitting Psoriasis in 1st-degree relative Clinical features of psoriatic arthritis include the simultaneous occurrence of small and large joint arthritis or involvement of DIP.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Is rheumatoid arthritis which involves bilateral and symmetrical joint pattern. the commonly affected joints are metacarpophalangeal joints, wrist, PIP, MTP and atlantoaxial joint (C1-C2), however rest of spine is not involved There is relative sparring of the DIP joint. deformities of this condition includes Boutonniere deformity, swann neck deformity, Z line deformity, trigger finger. Option: C. JIA is a group of conditions characterized by chronic inflammatory changes of the joints. it is defined as arthritis of 1 or more joints with onset below 16 years of age and persisting for atleast 6 weeks. it has the following subtypes: Systemic Oligoarthritis - (a) persistant (b) extended Polyarthritis - (a) RF factor +ve (b) RF factor -ve Psoriatic arthritis Enthesitis related arthritis Undifferentiated arthritis Option: D. Is oligoarthritis. it is the most frequent type of JIA. 4 or fewer joints are affected during the first 6 month of disease. joint swelling is usual complaint. it is more common in young girls, typically 3-5 years of age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The following lab investigation can be done in children presenting with complaints of pain and swelling in joints, suggestive of a diagnosis of JIA except for?", "options": [{"label": "A", "text": "Synovial Fluid Aspiration", "correct": false}, {"label": "B", "text": "Bone Marrow Aspiration", "correct": false}, {"label": "C", "text": "Csf Analysis", "correct": true}, {"label": "D", "text": "Cbc And Esr", "correct": false}], "correct_answer": "C. Csf Analysis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Csf Analysis Synovial fluid aspiration for microscopy and culture is indicated in children with monoarthritis in JIA Bone marrow aspiration is necessary if the use of glucocorticoids is being contemplated for the treatment of JIA. CBC &amp; ESR are routine investigations in most inflammatory conditions, with usually increased. CSF analysis is not done in cases of JIA , but it is useful in the diagnosis of infections like meningitis and encephalitis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following investigation done in cases of JIA acts as one of the surrogate markers of disease activity?", "options": [{"label": "A", "text": "Esr", "correct": false}, {"label": "B", "text": "Crp", "correct": true}, {"label": "C", "text": "Il - 1 &amp; 6", "correct": false}, {"label": "D", "text": "Cbc", "correct": false}], "correct_answer": "B. Crp", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Crp CRP measurement is a surrogate marker of disease activity and is helpful in follow-up. ESR &amp; CBC Both are routine lab investigations of JIA . usually raised. IL-1 is a mediator of fever, an inducer of acute phase response, and a lymphocyte activation factor. IL-6 acts as both pro and anti-inflammatory cytokine. stimulate osteoclastic activity.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old child is suffering from JIA. He has flexion deformities and he is unable to move his joints properly. All of these treatment modalities can be given to him in this case except?", "options": [{"label": "A", "text": "Medical Therapy With Nsaids", "correct": false}, {"label": "B", "text": "DMARDs", "correct": false}, {"label": "C", "text": "Biological Agents", "correct": false}, {"label": "D", "text": "Surgical Therapy", "correct": true}], "correct_answer": "D. Surgical Therapy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Surgical Therapy This is a case of JIA, the treatment modalities given to a patient of JIA are as follows - Surgical therapy is usually not indicated in the treatment of patients with JIA. it is only useful in cases that develop flexion contraction of hips, knees, and elbows resulting in permanent disability. TM joint involvement results in the restricted opening of the mouth and may require surgical intervention.</p>\n<p><strong>Highyeild:</strong></p><p>Conventional NSAIDs inhibit both COX 1 AND COX 2 . The most commonly used NSAIDs in children are Naproxen and Ibuprofen. All children with NSAIDS must be monitored for GIT adverse effects. treatment must continue for at least 4-6 weeks before a decision to switch over to another NSAIDS is made</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Medical therapy with NSAIDs is the mainstay of symptomatic management. Option: B. DMARDS - need to be started in all children with polyarthritis. weekly methotrexate (15-25/m2/week given C. or orally ) has simplified the management of severe forms of JIA. periodic testing of liver function is mandatory. hydroxychloroquine is a useful adjunct and is often used along with MTX. Option: C. Biological agents- newer modalities of treatment include recently introduced biological agents like Anakinra (IL-1 receptor antagonist ), canakinumab ( monoclonal antibody to IL-1 ), tocilizumab ( monoclonal antibody to IL-6 ), infliximab, golimumab and adalimumab ( monoclonal antibody to TNF-alpha ), etanercept and abatacept ( inhibitor of T cell activation ). etanercept and infliximab are powerful biological agents against TNF-alpha. tocilizumab and anakinra are found useful in children with severe forms of systemic JIA.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A patient was diagnosed with JIA 2 weeks back and came to the clinic with complaints of red eyes and blurring of vision. on evaluation further, iridocyclitis was found in eyes with the irregular pupil. Which of the following treatment agents can be useful in the management of this condition?", "options": [{"label": "A", "text": "Oral Prednisolone 1-2 Mg/Kg/Day", "correct": false}, {"label": "B", "text": "Biological Agents Like Anakinra &amp; Etanercept", "correct": false}, {"label": "C", "text": "Weekly Mtx Therapy", "correct": true}, {"label": "D", "text": "Selective Cox -2 Inhibitors Like Valdecoxib, and Rofecoxib For 3 Days", "correct": false}], "correct_answer": "C. Weekly Mtx Therapy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Weekly Mtx Therapy The patient here is diagnosed with JIA 2 weeks back and came to the clinic with complaints of red eyes and blurring of vision.</p>\n<p><strong>Highyeild:</strong></p><p>On evaluation, Iridocyclitis was found in eyes with the irregular pupil. iridocyclitis warrants therapy with local steroid instillation, and mydriatic eye drops. weekly Mtx therapy is required for patients with severe uveitis. weekly Mtx (15-25 mg/m2/week given S.C. or orally ) has simplified the management of severe forms of JIA. Children seem to tolerate Mtx better than adults and have fewer adverse effects.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Oral prednisolone is not given in this patients of JIA as systemic routes prednisolone is preferred ( 1-2 mg/kg/day, occasionally methylprednisolone 10-30 mg/kg ) are given for severe, unremitting arthritis, systemic manifestations, and rapidly progressive disease. Option: B. Biological agents like anakinra ( IL-1 receptor antagonist ) and etanercept ( recombinant soluble TNF receptor P 75 fusion protein). etanercept has been used in children with polyarthritis not responding to Mtx. Option: D. Selective COX -2 inhibitors are the recently introduced NSAIDS ( valdecoxib, rofecoxib). they have lower GIT adverse effects compared to other NSAIDs but are not recommended for use in children. treatment must continue for atleast 4-6 weeks before a decision to switch over to another NSAIDS is made and the mechanism is usually slow.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Akash a known case of JIA is referred to the rheumatology clinic as his condition started to worsen after taking steroid treatment. on examination, the patient has leukopenia, thrombocytopenia, sudden onset icterus, and purpura along with unremitting fever. His vitals are as shown below : BP - 80/60 mmHg PULSE - 120 BPM URINE OUTPUT - low The patient was diagnosed with macrophage activation syndrome (MAS) and was urgently admitted to PICU. All of the following findings are found in this syndrome except?", "options": [{"label": "A", "text": "Hypofibrinogenemia", "correct": false}, {"label": "B", "text": "Hypoerythropoesis", "correct": true}, {"label": "C", "text": "Hypertriglyceridemia", "correct": false}, {"label": "D", "text": "Hyperferritinemia", "correct": false}], "correct_answer": "B. Hypoerythropoesis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hypoerythropoesis MAS is characterized by all of the above-mentioned clinical features in question.</p>\n<p><strong>Highyeild:</strong></p><p>MAS is a rare but potentially fatal complication of systemic JIA. It is characterized by an uncontrolled proliferation and activation of T lymphocytes and macrophages. It leads to rapid progression to multiorgan failure if not promptly children with systemic JIA are especially prone to develop MAS. MAS can occur in many diseases like SLE, JIA, KAWASAKI DISEASE, dengue, covid 19. MAS is characterized by the following lab features : Fever &gt; 38.5 C Splenomegaly Hypofibrinogenemia ( paradoxical fall in ESR ) Hypertriglyceridemia Extreme hyperferritinemia Thrombocytopenia Treatment of MAS usually includes high-dose corticosteroids (e. MPS ) and immunosuppressive agents in refractory cases. Hypoerythropoisis is not a characteristic feature of MAS. it is seen in conditions like Chronic Kidney Disease, leukemia, Hep C, and Cirrhosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 19 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 13 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 2-year-old child came in complaining of a sore throat, noisy breathing, and difficulty breathing. On examination stridor is present. What is correct about stridor?", "options": [{"label": "A", "text": "It is an auditory manifestation of disordered respiratory function due to airflow changes within the larynx or bronchi", "correct": false}, {"label": "B", "text": "It needs investigation in every case", "correct": false}, {"label": "C", "text": "It is due to turbulence of air within a partially obstructed respiratory tract", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Stridor is a high-pitched musical breath sound resulting from the turbulent airflow in the larynx or bronchi. Stridor is a physical sign which is caused by a narrowed or obstructed airway. It can be inspiratory, expiratory, or biphasic. Inspiratory stridor often occurs in croup. It may be serious airway obstruction from severe conditions like epiglottitis and foreign bodies obstruction. Stridor should always command attention to establish its cause.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All are causes of congenital stridor except:", "options": [{"label": "A", "text": "Laryngeal web", "correct": false}, {"label": "B", "text": "Subglottic stenosis", "correct": false}, {"label": "C", "text": "Laryngomalacia", "correct": false}, {"label": "D", "text": "Epiglottitis", "correct": true}], "correct_answer": "D. Epiglottitis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Epiglottitis Acute epiglottitis is an infection caused by Haemophilus influenzae. Rest all others are example of congenital stridor.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-month-old child came with the complaint of noisy breathing which increased with crying and feeding. The probable diagnosis is laryngomalacia. What is not a feature?", "options": [{"label": "A", "text": "Usually present from birth or first few weeks of life", "correct": false}, {"label": "B", "text": "Tends to get better after 3-4 months", "correct": false}, {"label": "C", "text": "Always be investigated with microlaryngoscopy", "correct": true}, {"label": "D", "text": "It is due to the prolapse of tissue into the larynx during inspiration.", "correct": false}], "correct_answer": "C. Always be investigated with microlaryngoscopy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Always be investigated with microlaryngoscopy Laryngomalacia usually causes inspiratory stridor in babies. If the baby is thriving and feeding well with no respiratory distress then they do not need microlaryngoscopy. But this should be considered if the stridor is getting worse or there are any life-threatening features such as intermittent cyanosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Laryngomalacia is the most common congenital abnormality resulting in stridor. In most cases, treatment is:", "options": [{"label": "A", "text": "IV steroids", "correct": false}, {"label": "B", "text": "Nebulisation", "correct": false}, {"label": "C", "text": "Conservative management", "correct": true}, {"label": "D", "text": "Immediate surgery.", "correct": false}], "correct_answer": "C. Conservative management", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Conservative management In laryngomalacia, usually reassurance and posture repositioning is done. Manage dysphagia and reflux symptoms if present. In 15-20% of cases, progressive respiratory distress performed SUPRAGLOTTOPLASTY.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-month-old child came to the pediatric department with the complaint of noisy breathing which increases in crying whenever her mother tries to feed her. It increases in the supine position. What could be the probable diagnosis?", "options": [{"label": "A", "text": "Laryngeal web", "correct": false}, {"label": "B", "text": "Laryngomalacia", "correct": true}, {"label": "C", "text": "Subglottic stenosis", "correct": false}, {"label": "D", "text": "Tracheal stenosis", "correct": false}], "correct_answer": "B. Laryngomalacia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Laryngomalacia The above case presentation is of laryngomalacia. Inspiratory stridor starts after birth increases till 6 months and subsides by 2 years. Stridor increases with exertion (feeding, crying, agitation) and in the supine position. Stridor reduces with a change in posture.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You are posted in the pediatric department and your senior shows you a laryngoscopic image of a patient with laryngomalacia. What will be the clinical presentation of the patient?", "options": [{"label": "A", "text": "Stridor increases with the change of posture", "correct": false}, {"label": "B", "text": "Stridor decreases in the supine position.", "correct": false}, {"label": "C", "text": "Stridor decreases in the prone position.", "correct": true}, {"label": "D", "text": "Stridor decreases with crying", "correct": false}], "correct_answer": "C. Stridor decreases in the prone position.", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682885036756-QTDK059006IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Stridor decreases in the prone position. The above case presentation is of laryngomalacia. Inspiratory stridor starts after birth increases till 6 months and subsides by 2 years . Stridor increases with exertion (feeding, crying, agitation) and in the supine position. Stridor reduces with a change in posture.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-month-old child came with the complaint of noisy breathing which increase on feeding and crying. It decreases when the child is lying in a prone position. What will you advise the parents for the management?", "options": [{"label": "A", "text": "Usually reassurance and posture repositioning", "correct": true}, {"label": "B", "text": "Nebulisation", "correct": false}, {"label": "C", "text": "IV steroids", "correct": false}, {"label": "D", "text": "Immediate surgery", "correct": false}], "correct_answer": "A. Usually reassurance and posture repositioning", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Usually reassurance and posture repositioning The above case scenario is of Inspiratory stridor starts after birth increases till 6 months and subsides by 2 years. Stridor increases with exertion (feeding, crying, agitation) and in the supine position. Stridor reduces with a change in posture. In laryngomalacia, usually reassurance and posture repositioning is done. Manage dysphagia and reflux symptoms if present. In 15-20% of cases, progressive respiratory distress performed SUPRAGLOTTOPLASTY.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-month-old child complained of low-grade fever, cough, and some breathing difficulty. Furthermore, his father said that his mother also had a runny nose and cough, and breathing difficulty a few days ago which resolves on its own. The X-Ray is shown in below image: what could be the organism causing the disease?", "options": [{"label": "A", "text": "Respiratory Syncytial Virus( RSV)", "correct": true}, {"label": "B", "text": "Adenovirus", "correct": false}, {"label": "C", "text": "Parainfluenza", "correct": false}, {"label": "D", "text": "Influenza", "correct": false}], "correct_answer": "A. Respiratory Syncytial Virus( RSV)", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682885036857-QTDK059010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Respiratory Syncytial Virus( RSV) The above case scenario is of Bronchiolitis . The signs and symptoms of bronchiolitis are low-grade fever, cough, and breathing difficulty. The most common organism causing bronchiolitis is the Respiratory syncytial virus.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Ribavirin is used when bronchiolitis is associated with all except?", "options": [{"label": "A", "text": "Congenital heart disease", "correct": false}, {"label": "B", "text": "Chronic lung disease", "correct": false}, {"label": "C", "text": "Failure to thrive", "correct": true}, {"label": "D", "text": "Immunodeficiency", "correct": false}], "correct_answer": "C. Failure to thrive", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Failure to thrive Ribavirin is used when bronchiolitis is associated with congenital heart disease, chronic lung disease, and immunodeficiency.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Palivizumab is indicated for prophylaxis in bronchiolitis in all conditions except?", "options": [{"label": "A", "text": "Children born more than 29 weeks", "correct": true}, {"label": "B", "text": "Children with significant heart disease", "correct": false}, {"label": "C", "text": "Children with chronic lung disease of prematurity", "correct": false}, {"label": "D", "text": "Immunodeficiency", "correct": false}], "correct_answer": "A. Children born more than 29 weeks", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Children born more than 29 weeks Palivizumab is indicated for prophylaxis in bronchiolitis in: Children less than 29 weeks. Children with significant heart disease Children with chronic lung disease of prematurity Immunodeficiency</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Severe cases of bronchiolitis obliterans that cause major irreversible damage to the lungs and significantly impair a patient's ability to breathe properly may require what treatment?", "options": [{"label": "A", "text": "Lung transplant", "correct": true}, {"label": "B", "text": "Analgesics", "correct": false}, {"label": "C", "text": "Blood thinners", "correct": false}, {"label": "D", "text": "Radiation therapy", "correct": false}], "correct_answer": "A. Lung transplant", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Lung transplant In severe cases of bronchiolitis obliterans lung transplant is the only option. Other treatment options include corticosteroids, immunosuppressants, and azithromycin.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Cough associated with bronchiolitis obliterans can be treated with?", "options": [{"label": "A", "text": "Lung surgery", "correct": false}, {"label": "B", "text": "Over-the-counter cough medicine", "correct": false}, {"label": "C", "text": "Coumadin", "correct": false}, {"label": "D", "text": "Corticosteroid", "correct": true}], "correct_answer": "D. Corticosteroid", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Corticosteroid Treatment for bronchiolitis obliterans includes corticosteroids, immunosuppressants, or azithromycin.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The following X-ray is of a child who presents with the aspiration of a foreign body with complaints of wheezing and difficulty in breathing. Identify the correct X-ray of the patient with a foreign body in the trachea?", "options": [{"label": "A", "text": "1&amp;4", "correct": false}, {"label": "B", "text": "1&amp;3", "correct": true}, {"label": "C", "text": "2&amp;3", "correct": false}, {"label": "D", "text": "2&amp;4", "correct": false}], "correct_answer": "B. 1&3", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682885037004-QTDK059017IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1&amp;3 1&amp;3 are the X-Ray of foreign bodies in the trachea. 2&amp;4 are the X-Ray of foreign bodies in the</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 23 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 6 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 5-year-old boy is brought to the pediatric clinic with complaints of easy fatigability, petechial rashes, and fever. Per abdominal examination shows hepatosplenomegaly. Laboratory investigations reveal, Total leukocyte count &gt;1,00,000 cells/mm3 Platelet count 80,000cells/mm3 RBC count 2.2 million cells/mm3 Chromosomal study shows translocation (12;21). What is the most likely diagnosis", "options": [{"label": "A", "text": "Myelomonocytic Leukemia", "correct": false}, {"label": "B", "text": "Acute Lymphoblastic Leukemia", "correct": true}, {"label": "C", "text": "Chronic Myeloid Leukemia", "correct": false}, {"label": "D", "text": "Hodgkin Lymphoma", "correct": false}], "correct_answer": "B. Acute Lymphoblastic Leukemia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Acute Lymphoblastic Leukemia ALL is the most common childhood malignancy that peaks between 2 and 5 years of age. B-ALL is most common in 1st decade of life whereas T-ALL is more common after the first decade. Laboratory investigations show high TLC count (&gt;1,00,000 cells/mm3) and pancytopenia. Clinical features are attributed to bone marrow infiltration with leukemic cells (bone marrow failure) and extramedullary involvement, including pallor, fatigue, petechiae, purpura or bleeding , and infections. Lymphadenopathy and hepatosplenomegaly are present in more than 60% of cases of ALL. t(12;21) confirms it as ALL.</p>\n<p><strong>Highyeild:</strong></p><p>The presence of t(12:21) indicates a good prognosis. Age between 2-10 years, female, hyperploidy, early precursor Bcell type these all are associated with good prognosis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Myelomonocytic leukemia is an M4 type of AML according to FAB classification. This also shows organomegaly and high leukocyte But t(12;21) is not seen in AML Option C. CML constitutes 3% of childhood leukemias characterized by myeloid hyperplasia of the bone marrow, extramedullary hematopoiesis, and elevated TLC. A specific cytogenetic marker in CML is the Philadelphia chromosome. Option D. Hodgkin lymphoma arises from the B cell lineage that involves lymph nodes and the lymphatic system. They present with painless cervical or supraclavicular lymphadenopathy, fever, night sweats, and loss of body weight. Pancytopenia and high TLC count are unlikely.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old girl presents to pediatric OPD with a pale look, abdominal discomfort, fever, and rashes. The cytogenetic study confirmed it as Acute Lymphoblastic disease. Which of the following is not seen in ALL?", "options": [{"label": "A", "text": "t(12;21)", "correct": false}, {"label": "B", "text": "t(1;19)", "correct": false}, {"label": "C", "text": "Hyperdiploidy", "correct": false}, {"label": "D", "text": "t(8;21)", "correct": true}], "correct_answer": "D. t(8;21)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>t(8;21) Genetic abnormalities seen in ALL include all of the above except t(8;21 ) which is seen in AML . t(15;17) is also seen in APML - a variety of AML.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A . t(12;21): seen in 15-25% cases of ALL and has an excellent prognosis Option B . t(1;19): seen in 2-6% cases of ALL and has a lousy prognosis Option C. Hyperdiploidy (&gt;50 chromosomes): Seen most commonly (in 20-30%) and has an excellent prognosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old boy is brought to the clinic with complaints of weight loss, easy fatigability, petechial rashes, and fever. A bone marrow aspirate showed 20% blasts. Laboratory investigations revealed- Total leukocyte count of 1,50,000 cells/mm3 Platelet count 1,00,000cells/mm3 RBC count 2 million cells/mm3 Peripheral blood smear is shown below: What is the most likely diagnosis?", "options": [{"label": "A", "text": "Acute Myeloid Leukemia", "correct": true}, {"label": "B", "text": "Acute Lymphoblastic Leukemia", "correct": false}, {"label": "C", "text": "Chronic Myeloid Leukemia", "correct": false}, {"label": "D", "text": "Hodgkin Lymphoma", "correct": false}], "correct_answer": "A. Acute Myeloid Leukemia", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1697880423114-WhatsAppImage2023-10-21at14.09.20_2f2876e5.jpg"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Acute Myeloid Leukemia Acute Myeloid Leukemia image shows the presence of Auer rods in the cytoplasm of myeloid cells which is seen in AML .</p>\n<p><strong>Highyeild:</strong></p><p>The diagnosis of AML requires ≥20% blasts in the peripheral blood or bone marrow. Cells with multiple Auer rods are called faggot cells which is seen in APML .</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. ALL is the most common childhood malignancy that peaks between 2 and 5 years of age. Laboratory investigations show high TLC count (&gt;1,00,000 cells/mm3) and pancytopenia. Lymphadenopathy and hepatosplenomegaly are present in more than 60% of cases of ALL but are not commonly seen in AML. Option C. CML constitutes 3% of childhood leukemias characterized by myeloid hyperplasia of the bone marrow, extramedullary hematopoiesis, and elevated TLC. A specific cytogenetic marker in CML is the Philadelphia chromosome . Option D. Hodgkin lymphoma arises from the B cell lineage that involves lymph nodes and the lymphatic system. They present with painless cervical or supraclavicular lymphadenopathy, fever, night sweats, and loss of body weight. Pancytopenia and high TLC count are unlikely.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 9-year-old boy presents to pediatric OPD with weight loss and easy fatigability. On lab investigations: Total leukocyte counts 1,38,000 cells/mm3, Platelet counts 98,000 cells/mm3 RBC count 2.1 million cells/mm3. The cytogenetic study confirmed Acute Myeloid Leukemia. Which of the following subtypes of AML according to FAB classification is more likely to be seen as shown in the image?", "options": [{"label": "A", "text": "Promyelocytic leukemia", "correct": false}, {"label": "B", "text": "Myelomonocytic leukemia", "correct": true}, {"label": "C", "text": "Monocytic leukemia", "correct": false}, {"label": "D", "text": "Erythroleukemia", "correct": false}], "correct_answer": "B. Myelomonocytic leukemia", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1690953927707-QTDK001004IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Myelomonocytic leukemia The clinical presentation along with laboratory values point towards possible leukemia.</p>\n<p><strong>Highyeild:</strong></p><p>The image above shows gum hypertrophy which is a common feature of the M4 subtype (Myelomonocytic leukemia) of AML according to FAB classification. It is associated with t(16;16) .</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Promyelocytic leukemia: M3 subtype of AML in which t(15;17) is commonly seen. Disseminated intravascular coagulation ( DIC ) is common in M3 . Option: C. Monocytic leukemia or M5 subtype of AML. Children with M4 and M5 Option: D. Erythroleukemia is an M6 subtype of AML</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old boy with mental retardation, low-set ears, epicanthal fold presented to the pediatrics OPD with complaints of fever, rashes, and easy fatigability. Diagnosis of Acute Lymphoblastic Leukemia was made and treatment was started. Which of the following is true about induction therapy in the treatment of ALL?", "options": [{"label": "A", "text": "Bring down leukemic blasts in the bone marrow to &lt; 10%", "correct": false}, {"label": "B", "text": "Regimen includes vincristine and prednisolone for 4-6 weeks.", "correct": true}, {"label": "C", "text": "Daunomycin weekly", "correct": false}, {"label": "D", "text": "None of the above", "correct": false}], "correct_answer": "B. Regimen includes vincristine and prednisolone for 4-6 weeks.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Regimen includes vincristine and prednisolone for 4-6 weeks. Initial therapy termed remission induction is designed to eradicate the leukemic cells from the bone marrow.</p>\n<p><strong>Highyeild:</strong></p><p>During this phase, therapy is given for 4 weeks which includes vincristine weekly, corticosteroids such as dexamethasone or prednisone, and usually a single dose of long-acting pegylated asparaginase With this approach, 98% of patients are in remission as defined &lt;5% blasts in the marrow and return of neutrophil and platelet counts to near normal levels after 4-5 weeks of treatment. Patients at higher risk also receive daunomycin at weekly intervals.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Goal of induction therapy is to bring down leukemic blasts in the bone marrow to &lt; 5% by the end of this phase. Option: C. Patients who achieve rapid early remission (&lt; 5% blasts in marrow) by day 7 or 14 of induction have a better prognosis than slow responders.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old boy diagnosed as ALL a few weeks back comes to the clinic for chemotherapy. Which of the following is the correct order of stages of therapy for ALL:", "options": [{"label": "A", "text": "Consolidation phase, Intensification phase, Induction phase, Maintenance phase", "correct": false}, {"label": "B", "text": "Intensification phase, Induction phase, Maintenance phase, consolidation phase", "correct": false}, {"label": "C", "text": "Induction phase, consolidation phase, Intensification phase, Maintenance phase", "correct": true}, {"label": "D", "text": "Intensification phase, Induction phase, consolidation phase, Maintenance phase", "correct": false}], "correct_answer": "C. Induction phase, consolidation phase, Intensification phase, Maintenance phase", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Induction phase, consolidation phase, Intensification phase, Maintenance phase The correct order is: Initial therapy- remission induction is designed to eradicate the leukemic cells from the bone marrow. The second phase- consolidation phase focuses on intensive CNS therapy in combination with continued intensive systemic therapy to prevent later CNS relapses. Third phase- The intensification phase includes phases of aggressive treatment—the final phase maintenance phase of therapy which lasts for 2-3 years depending on the protocols used. Adolescents and young adults with ALL have an inferior prognosis compared to children &lt;15yrs old.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 16 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 10 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 5-year-old child with developmental delay and a protuberant belly comes to the clinic. Per abdomen examination shows hepatosplenomegaly. A child also has ophthalmoplegia and squint. Fundus examination is normal. Bone marrow microscopy shows the following: Which of the following is true about the above disorder? Images; A) and B) Showing typical Gaucher cell with “wrinkled tissue pattern” on bone marrow aspirate smear (x100, Leishman’s stain)", "options": [{"label": "A", "text": "It shows an autosomal dominant pattern of inheritance", "correct": false}, {"label": "B", "text": "Diagnosis is made by measuring glucocerebrosidase levels in leukocytes and skin fibroblasts.", "correct": true}, {"label": "C", "text": "Enzyme deficiency involved is sphingomyelinase", "correct": false}, {"label": "D", "text": "None of the above", "correct": false}], "correct_answer": "B. Diagnosis is made by measuring glucocerebrosidase levels in leukocytes and skin fibroblasts.", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883032882-QTDK013001IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Diagnosis is made by measuring glucocerebrosidase levels in leukocytes and skin fibroblasts. Diagnosis of Gaucher’s disease is made by measuring glucocerebrosidase levels in leukocytes and skin fibroblasts. Enzyme deficiency in Gaucher’s disease is glucocerebrosidase .</p>\n<p><strong>Highyeild:</strong></p><p>Serum chitotriosidase levels are elevated. DNA analysis is helpful in assessment of phenotype and prenatal diagnosis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Gaucher’s disease is an autosomal recessive inherited lysosoma l disorder Majority of LSD show an Autosomal recessive pattern except mucopolysaccharidosis 2 and Fabry’s disease. Option: C. Sphingomyelinase deficiency causes Niemann-Pick disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-month-old baby with loss of head control, and ability to sit which were previously present. The mother complains that the child makes decreased eye contact while feeding and startles very easily to loud sounds and cherry red spots on the retina. The baby was diagnosed with Tay Sach’s disease type 1 due to a lysosomal enzyme deficiency. The enzyme deficiency in Tay Sach’s disease(type 1) is:", "options": [{"label": "A", "text": "Sphingomyelinase.", "correct": false}, {"label": "B", "text": "Glucocerebrosidase.", "correct": false}, {"label": "C", "text": "Hexosaminidase.", "correct": true}, {"label": "D", "text": "Hexosaminidase A+B.", "correct": false}], "correct_answer": "C. Hexosaminidase.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hexosaminidase. Tay Sach’s disease type 1 is due to a deficiency of the enzyme hexosaminidase which causes the accumulation of GM2 Ganglioside.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Sphingomyelinase deficiency causes Niemann Pick’s disease. Option: B. Glucocerebrosidase deficiency is seen in Gaucher’s disease. Option: D. Hexosaminidase A and B are deficient in Tay sack’s disease type 2, also known as Sandhoff’s disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old child with developmental delay and joint contractures and stiffness. On general physical examination: Coarse facial features are present and Cornea shows clouding. On per abdomen examination; hepatomegaly + X-Ray Spine shows Beaking of inferior margins of vertebrae. Urinary 2d electrophoresis shows the presence of dermatan sulfate. What will be your diagnosis?", "options": [{"label": "A", "text": "Hunter syndrome", "correct": false}, {"label": "B", "text": "Morquio syndrome", "correct": false}, {"label": "C", "text": "MPS type 3", "correct": false}, {"label": "D", "text": "Hurler syndrome", "correct": true}], "correct_answer": "D. Hurler syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hurler syndrome Hurler syndrome is type 1 mucopolysaccharidosis with features</p>\n<p><strong>Highyeild:</strong></p><p>Developmental delay, Visceromegaly, coarse facial features, dysostosis multiplex (Beaking of the inferior margin of vertebrae and proximal pointing of metacarpals on Xray), and corneal clouding.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Hunter syndrome is type 2 MPS. Corneal Clouding is absent in the majority of the cases. Option: B. MORQUIO syndrome is type 4 MPS . Developmental delay is not evident, visceromegaly is absent and Urinary glycosaminoglycans are chondroitin S. and keratan S. Option: C. MPS type 3 has minimal corneal clouding and urinary GAGs present is Heparan Sulfate . Also known as Sanfilippo syndrome</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old male child is diagnosed with a peroxisomal disorder due to a deficient enzyme. A child shows symptoms like seizures and behavioural problems and emotional liability. The diagnosis was made as X- linked adrenoleukodystrophy. Which of the following disorders is incorrect about X-linked Adrenoleukodystrophy ?", "options": [{"label": "A", "text": "The defective gene (ABCD) is located on Xq-28.", "correct": false}, {"label": "B", "text": "The disease is caused by tissue accumulation of Very long-chain fatty acids (VLFCA) due to a deficiency of peroxisomal enzymes.", "correct": false}, {"label": "C", "text": "MRI typically shows demyelination in the frontal areas of the brain.", "correct": true}, {"label": "D", "text": "Elevated plasma levels of VLCFA can identify patients and 85% of female carriers.", "correct": false}], "correct_answer": "C. MRI typically shows demyelination in the frontal areas of the brain.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>MRI typically shows demyelination in the frontal areas of the brain. MRI brain shows demyelination in parieto-occipital areas and splenium of corpus callosum.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. The defective gene (ABCD) is located on Xq-28 . Option: B. The disease is caused by tissue accumulation of Very long-chain fatty acids (VLFCA) due to a deficiency of peroxisomal enzymes Option: D. Elevated plasma levels of VLCFA can identify patients and 85% of female carriers.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-month-old with a flat facial profile and jerky movements and episodic loss of consciousness. A child has no neck control and limps. The genetic analysis showed a mutation in PEX genes. the following disorder is due to :", "options": [{"label": "A", "text": "Insufficient peroxisomal beta-oxidation", "correct": true}, {"label": "B", "text": "Insufficient mitochondrial beta-oxidation", "correct": false}, {"label": "C", "text": "Glycogen storage disease", "correct": false}, {"label": "D", "text": "None of the above", "correct": false}], "correct_answer": "A. Insufficient peroxisomal beta-oxidation", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Insufficient peroxisomal beta-oxidation Peroxisomes are involved in the beta-oxidation of phytanic acid and very long-chain fatty acids. Functionally peroxisomal disorders are divided into two major groups: Disorders of peroxisomal biogenesis: Zellweger syndrome Infantile refsum disease Neonatal adrenoleukodystrophy Rhizomelic chondrodysplasia punctata Disorders of peroxisomal enzymes X-linked adrenoleukodystrophy Classical refsum disease</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Insufficient mitochondrial beta-oxidation can cause FAODs (FATTY ACID OXIDATION DISORDERS) Option: C. glycogen storage disorders are caused by the accumulation of glycogen in various body tissue liver, muscles and heart. (eg. Von Gierke’s/Pompe’s/ hers/ Anderson / Forbes/mc Ardle)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-month-old with coarse facial features and corneal clouding. Physical examination showed a short trunk and barrel-shaped chest with protruding sternum. Per abdominal examination was normal. Radiology shows central beaking of lumbar vertebrae and short ulna. The urinary 2D electrophoresis shows keratan and chondroitin sulphate", "options": [{"label": "A", "text": "MPS type 1", "correct": false}, {"label": "B", "text": "MPS type 2", "correct": false}, {"label": "C", "text": "MPS type 3", "correct": false}, {"label": "D", "text": "MPS type 4", "correct": true}], "correct_answer": "D. MPS type 4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>MPS type 4 Visceromegaly and developmental delay is not evident. urinary Glycosaminoglycans: keratan and chondroitin sulfate. This is the best correct option and X-ray changes show central beaking of lumbar vertebrae. : Differentiating features of mucopolysaccharidosis MPS type Developmental Delay Coarse facies Viscero megaly Joint contractures Dysostosismultiplex** Corneal clouding Urine glycosaminoglycams Hurier/H +(serve) +(serve) + + + + Dermatan Schele/1S - +(mild) ±(mild) + ±(mild) + sulfate Hunter/l +(mild to serve) + + + + - Keratan sulfate Sanfilippo/lll +(serve) +(mild) ± ±(minienal) ±(minienal) Heparan sulfate Morquio/IV - +(mild) - -(laxity) + ± Keratan and chondroitin sulfate Maroteaux - + + + + + Dermatan Lamy/VI sulfate Sly/VII +(serve) + + + + ± All except keraran aulfate</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. MPS type 1 severe developmental delay is present. Glycosaminoglycans are dermatan sulfate and keratan sulfate. Option: B. MPS type 2 Corneal clouding is absent Option: C. MPS type 3 Urinary glycosaminoglycans are heparan sulfate</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old boy was normal at birth but developed coarse facial features and developmental delay. He was found to have joint stiffness and hepatosplenomegaly. Corneal clouding is absent. On 2-d urine electrophoresis, GAG’s were detected. In the family of diseased, all the boys were affected by the same disorder.", "options": [{"label": "A", "text": "Hurler syndrome", "correct": false}, {"label": "B", "text": "Galactosemia", "correct": false}, {"label": "C", "text": "Sanfilippo syndrome", "correct": false}, {"label": "D", "text": "Hunter syndrome", "correct": true}], "correct_answer": "D. Hunter syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hunter syndrome Hunter syndrome is an X-linked disorder exclusively seen in males.</p>\n<p><strong>Highyeild:</strong></p><p>Patients with severe Hunter syndrome have features the same as Hurler syndrome except corneal clouding is absent in Hunter syndrome and progression is slow.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A . Hurler syndrome type 1 MPS autosomal recessive disorder. Developmental delay, visceromegaly, dysostosis multiplex, corneal clouding, joint stiffness Option: B . Galactosemia is caused by a deficiency of the GALT enzyme have more commonly abdominal symptoms like diarrhoea, jaundice Option: C. Sanfilippo is type 3 MPS with autosomal recessive inheritance.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 14-year-old girl presents with irritability, poor walking, and gait disturbance. Examination reveals absent deep tendon reflexes. Lab investigations show decreased levels of aryl sulphatase A in white cells .", "options": [{"label": "A", "text": "Fabry’s disease", "correct": false}, {"label": "B", "text": "Metachromatic leukodystrophy", "correct": true}, {"label": "C", "text": "Neuronopathic Gaucher’s disease", "correct": false}, {"label": "D", "text": "Tay Sach’s disease", "correct": false}], "correct_answer": "B. Metachromatic leukodystrophy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Metachromatic leukodystrophy Metachromatic leukodystrophy has infantile and juvenile forms present as disturbances of gait and progressive mental retardation.</p>\n<p><strong>Highyeild:</strong></p><p>The knee jerk is brisk but ankle and plantar reflex is absent, diagnosis is confirmed by decreased levels of aryl sulphatase A in white cells.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Fabry’s disease: alpha-galactosidase deficiency Option: C. Gaucher’s disease: glucocerebrosidase deficiency Option: D. Tay Sach’s disease: hexosaminidase deficiency</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15-year-old Ashkenazi Jewish girl complains of chronic fatigue, she looks thin and has a protuberant belly. on examination: pallor-++, Fundus examination reveals no abnormality. On per abdomen examination; hepatosplenomegaly is present. Patients give a previous history of bone fractures. Complete hemogram as below: HB: 8.5G/dl Wbc: 2900/cubic-mm Platelets: 70,000/ The most likely diagnosis is:", "options": [{"label": "A", "text": "Tay Sachs disease", "correct": false}, {"label": "B", "text": "Gaucher’s type 1", "correct": true}, {"label": "C", "text": "Niemann picks disease type A", "correct": false}, {"label": "D", "text": "MPS type 1", "correct": false}], "correct_answer": "B. Gaucher’s type 1", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Gaucher’s type 1 Gaucher’s disease type 1 (non-neuronopathic form) i.e., no neurological symptoms seen. Very commonly seen in Ashkenazi Jews . Features: develop at any age, anaemia, fatigue, bone pain and fractures, pancytopenia and splenomegaly.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Tay Sachs disease results from the accumulation of GM2 gangliosides in ganglionic cells of the nervous system and manifests by 6 months of age with rapid progression and neurological involvement with a cherry red spot on fundus examination. Death occurs in 4 to 5 years. Option: C. Cherry red spot on fundus examination. neurological symptoms are present in A and C types. Option: D. MPS TYPE 1 hurler syndrome: cheery red spot with coarse facial features and dev. delay</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-month-old child with developmental delay, extreme irritability and feeding difficulties and no organomegaly and normal fundus examination was brought to the clinic. After running the lab investigations and imaging, The levels of galactocerebrosidase were decreased and nerve tissue biopsy showed Globoid cells. Radio imaging by MRI brain shows diffuse symmetrical demyelination in the brain with thalamic involvement. What is the Most likely diagnosis ?", "options": [{"label": "A", "text": "X linked adrenoleukodystrophy", "correct": false}, {"label": "B", "text": "Gaucher's disease", "correct": false}, {"label": "C", "text": "Krabbe's disease", "correct": true}, {"label": "D", "text": "Fabry's disease", "correct": false}], "correct_answer": "C. Krabbe's disease", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Krabbe's disease Krabbe's disease is due to a deficiency of galactocerebrosidase enzyme</p>\n<p><strong>Highyeild:</strong></p><p>It shows neurological features without organomegaly unlike other LSD Nerve tissue biopsy shows globoid cells hence also called globoid leukodystrophy .</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. X-linked adrenoleukodystrophy typically shows demyelination in posterior parietooccipital areas. Option: B. Gaucher's disease is caused by a deficiency of glucocerebrosidase Option: D. Fabry's disease is due to . alpha galactosidase</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 20 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 10 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "You are a JR-1 on duty in a Neonatal Intensive Care Unit (NICU), your consultant asks you to examine a term neonate born born15 days ago via full-term normal vaginal delivery who is admitted today to the Neonatal Intensive Care Unit (NICU) but was diagnosed with jaundice on day 1 of life. You notice the neonate has characteristic facies, on checking the neonate's file the spine x-ray can be seen in the image. The pedigree chart of patients shows the following inheritance pattern. The history and examination point to a diagnosis of a certain syndrome. Which of the following statements is not consistent with the neonate's symptomatology &amp; the syndrome based on his history &amp; clinical tests?", "options": [{"label": "A", "text": "Alagille syndrome is an intrahepatic cause of Neonatal cholestasis", "correct": false}, {"label": "B", "text": "JAG1 &amp; NOTCH 2 mutations are seen in Alagille syndrome", "correct": false}, {"label": "C", "text": "Paucity of biliary duct leads to chronic cholestasis in a child of Alagille syndrome", "correct": false}, {"label": "D", "text": "Neonatal cholestasis is defined as Total Serum Bilirubin [TSB]&gt;5 mg/dl &amp; conjugated bilirubin &gt;20% of TSB", "correct": true}], "correct_answer": "D. Neonatal cholestasis is defined as Total Serum Bilirubin [TSB]>5 mg/dl & conjugated bilirubin >20% of TSB", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884060897-QTDK037001IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Neonatal cholestasis is defined as Total Serum Bilirubin [TSB]&gt;5 mg/dl &amp; conjugated bilirubin &gt;20% of TSB If TSB &lt; 5; Conjugated &gt; 1 mg/di If TSB &gt; 5; Conjugated &gt; 20% of TSB Neonatal cholestasis should be considered in D/D of persistent jaundice in children after 2 weeks of age The diagnosis based on the image and history is Alagille syndrome. Alagille syndrome is an intrahepatic cause of Neonatal cholestasis JAG1 &amp; NOTCH 2 mutations are seen in Alagille syndrome The paucity of biliary duct leads to chronic cholestasis in a child of Alagille syndrome. Triangular facies, Autosomal Dominant inheritance, Peripheral Pulmonary Stenosis, butterfly-shaped vertebrae, and ocular posterior embryotoxon point to the diagnosis of Alagille Syndrome.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following statement is false about the Histopathology of Celiac Disease? Decreased villi to crypt ratio Decreased intraepithelial lymphocytes Villus atrophy Crypt hyperplasia. Select the correct answer from given below code:", "options": [{"label": "A", "text": "A, B are false", "correct": false}, {"label": "B", "text": "C, D are false", "correct": false}, {"label": "C", "text": "Only B is false", "correct": true}, {"label": "D", "text": "Only A is false", "correct": false}], "correct_answer": "C. Only B is false", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884061355-QTDK037002IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Only B is false Histopathological findings in case of celiac disease. Statement A. Decreased villi-to-crypt ratio Statement B. Increased intraepithelial lymphocytes Statement C. Villous atrophy Statement D. Crypt hyperplasia. Statement E. Inflammatory cells in lamina propria. Histopathologic findings in patients with autoimmune enteropathy (AE) and common variable immunodeficiency (CVID). A, Duodenal biopsy specimen from a patient with AE illustrates moderate villous atrophy and absence of goblet cells and Paneth cells, without surface lymphocytosis. B, Duodenal biopsy specimen from a patient with AE shows absence of goblet cells and Paneth cells, with mild lymphocytosis, crypt apoptosis, and mitosis in the deep crypt epithelium. C, Duodenal biopsy specimen from a patient with CVID demonstrates moderate villous atrophy and surface intraepithelial lymphocytosis, with absence of plasma cells. D. An immunohistochemical stain for CD138 confirms the absence of plasma cells in the lamina propria.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A neonate 6 weeks old was diagnosed with unconjugated hyperbilirubinemia. On investigation, the bilirubin level was raised, and liver enzymes - were normal. Phenobarbitone therapy was given, but there was no change in the patient's condition, what is the most likely diagnosis?", "options": [{"label": "A", "text": "Dubin-johnson syndrome", "correct": false}, {"label": "B", "text": "Crigler-najjar syndrome type 1", "correct": true}, {"label": "C", "text": "Crigler-najjar syndrome type 2", "correct": false}, {"label": "D", "text": "Gilbert syndrome", "correct": false}], "correct_answer": "B. Crigler-najjar syndrome type 1", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Crigler-najjar syndrome type 1 This is a case of unconjugated hyperbilirubinemia &amp; phenobarbitone therapy is given but there was no improvement in the patient's condition, hence it is suggestive of crigler-najjar syndrome type 1.</p>\n<p><strong>Highyeild:</strong></p><p>It is an autosomal recessive disorder, characterized by the absence of udp-gt activity. In this syndrome, the patient develops severe unconjugated hyperbilirubinemia &amp; dies by 18-24 months of age if untreated. Serum bilirubin levels should be kept below 20 mg/dl during the first months of life to prevent brain damage. Management - phototherapy, plasmapheresis &amp; exchange transfusion are required in the initial phases. The definitive treatment is a liver transplant. Dubin-johnson syndrome (option a) is a cause of conjugated hyperbilirubinemia. It is an autosomal recessive disorder resulting from impaired hepatic excretion of billirubin (2-6 mg/dl). A liver biopsy is often done for the exclusion of other causes &amp; shows brown-black pigmentation. Crigler-Najjar syndrome type 2 (option c) is also known as aria syndrome. There is a marked reduction of udp-gt. In comparison to type 1, jaundice is less severe as bilirubin level significantly decreases following the administration of phenobarbitone. Gilbert syndrome (option d) is the most common cause of unconjugated hyperbilirubinemia, resulting from a partial deficiency of the enzyme udp-gt. Most patients exhibit chronic, recurrent jaundice (up to 6 mg/dl). Mild fatigue, nausea, anorexia, or abdominal pain may be present.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child while playing, accidentally ingested a few tablets. A few hours later, he was rushed to e.r with nausea &amp; vomiting. On history taking, the doctor suspects it to be paracetamol tablet ingestion. All these clinical criteria are included in pcm poisoning treatment except?", "options": [{"label": "A", "text": "Alkalosis", "correct": true}, {"label": "B", "text": "Coagulopathy", "correct": false}, {"label": "C", "text": "Renal dysfunction", "correct": false}, {"label": "D", "text": "Grade 4 hepatic encephalopathy", "correct": false}], "correct_answer": "A. Alkalosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Alkalosis This is a case of paracetamol poisoning, it is the most common cause of acute liver failure. It results from the formation of a highly reactive metabolite, napqi (n-acetyl-p benzoquinone imine). Its toxic dose in children is &gt; 200 mg/kg. Kings College criteria for acetamenofan toxicity which are used for deciding referral for liver transplantation : Acidemia (serum ph &lt; 7.3) after adequate fluid resuscitation Coagulopathy (inr &gt; 6) Renal dysfunction (creatinine &gt; 3.4 mg/dl) Grade 3/4 hepatic encephalopathy Clinical stages of acetaminophen toxicity Stage Time after ingestion Characteristics 1 12-24 hours Asymptomatic; nausea and vomiting 2 24-48 hours Resolution of earlier symptoms; evidence of elevated liver transaminases 3 3-5 days Anorexie, nausea, vomiting; multiorgan dysfunction; peak transaminase elevation 4 4-14 days Recovery phase with resolution of clinical symptoms and improvement in hepatic functions</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A mother brought her 6-year-old boy to the hospital for his strange behavior &amp; decrease in academic performance. His urinary copper levels were raised upon investigation. All of the following manifestations can occur in this patient except?", "options": [{"label": "A", "text": "Difficulty in speech", "correct": false}, {"label": "B", "text": "Chronic hepatitis", "correct": false}, {"label": "C", "text": "Portal hypertension", "correct": false}, {"label": "D", "text": "Sparse depigmented hair", "correct": true}], "correct_answer": "D. Sparse depigmented hair", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Sparse depigmented hair The diagnosis, in this case, is Wilson's It is an inborn error of metabolism due to the toxic accumulation of copper in the liver, brain, cornea &amp; other tissues. Clinical features : Age of presentation from 4-60 years Hepatic manifestations include hepatomegaly, chronic hepatitis, portal hypertension, cirrhosis, and viral hepatitis. Neurological abnormalities present as speech difficulties, clumsiness, scholastic deterioration, behavioral problems, convulsions &amp; dystonic movements Investigations : Serum ceruloplasmin - decreased (&lt; 20 mg/dl) 24-hour urinary copper excretion (&gt; 100 mcg/day) K-f ring - indicates long-standing disease &amp; severe copper overload Liver biopsy - for hepatic copper estimation Treatment : Foods with high copper content should be avoided Depenicilamine or trientine is used as chelation therapy Zinc because of its safety profile, can be used for maintanance therapy. Sparse depigmented hair is seen in menke's disease. Gene affected is atp 7a.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 12-year-old girl was rushed to the e.r due to hematemesis. Her parents gave a history of weakness &amp; prolonged jaundice for the last 2 months. On investigation, the presence of ana was found. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Sle", "correct": false}, {"label": "B", "text": "Type 1 autoimmune hepatitis", "correct": true}, {"label": "C", "text": "Type 2 autoimmune hepatitis", "correct": false}, {"label": "D", "text": "Hepatitis c", "correct": false}], "correct_answer": "B. Type 1 autoimmune hepatitis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Type 1 autoimmune hepatitis The most likely diagnosis here is type 1 autoimmune hepatitis. Autoimmune liver disease is characterized by hypergammaglobulinemia, the presence of circulating autoantibodies, interphase hepatitis on biopsy &amp; response to immune suppressive agents. The condition is common in girls, the following 2 types of autoimmune hepatitis are recognized : Type 1 autoimmune hepatitis - the presence of an antibody &amp; anti-smooth muscle antibody, constitutes 60-70 % of cases. Type 1 autoimmune hepatitis - the presence of anti-liver-kidney microsomal antibody (lkm), accounts for 20-30 % of cases. Clinical features : Acute viral hepatitis with malaise, nausea, vomiting &amp; jaundice Insidious onset liver disease with progressive fatigue, relapsing, or prolonged jaundice Chronic liver disease with splenomegaly, ascites, hepatic encephalopathy Diagnosis - criteria +ve autoantibodies Raised gammaglobulin &amp; igg levels Typical histology on liver biopsy Absence of known etiology (viral hepatitis, Wilson's disease) Response to immunosuppression Management : Steroids &amp; azathioprine are primary agents, while cyclosporine &amp; mycophenolate mofetil are second-line drugs</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 9-year-old baby presented to the clinic with h/o diarrhea &amp; iron deficiency anemia, which do not respond to oral supplements. On histology, the findings are as shown in the image below. What is the diagnosis?", "options": [{"label": "A", "text": "Wilson's disease", "correct": false}, {"label": "B", "text": "Whipple's disease", "correct": false}, {"label": "C", "text": "Autoimmune liver disease", "correct": false}, {"label": "D", "text": "Celiac disease", "correct": true}], "correct_answer": "D. Celiac disease", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884061516-QTDK037011IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Celiac disease The diagnosis in this condition is celiac disease, also known as tropical sprue. This is an enteropathy caused by a permanent sensitivity to gluten in genetically susceptible subjects. It is the most common cause of chronic diarrhea in children over 2 years of age. High risk groups include : People with type 1 diabetes Mellitus Down syndrome Thyroid disease Selective is a deficiency First degree relatives Clinical features : Small bowel diarrhea Growth failure Anemia (refractory iron deficiency or dimorphic anemia) Short stature, delayed puberty, rickets, osteopenia Examination reveals a failure to thrive, loss of subcutaneous fat, clubbing Diagnosis : Serology Autoantibodies present in it are - in an against ttg, recommended for initial testing of celiac disease. Ig an anti endomysial antibody Anti gliadin antibody Histology Total villous atrophy Decrease villous-to-crypt ratio Infiltration of plasma cells &amp; lymphocytes in lamina propria. Treatment : Involves lifelong gfd (gluten-free diet) &amp; correction of iron, folate &amp; other vitamin or mineral deficiency Option A. Wilson's disease is an inborn error of metabolism due to the toxic accumulation of copper in the liver, brain, cornea &amp; other tissues. Clinical features : Age of presentation from 4-60 years Hepatic manifestations include hepatomegaly, chronic hepatitis, portal hypertension, cirrhosis, and viral hepatitis. Neurological abnormalities present as speech difficulties, clumsiness, scholastic deterioration, behavioral problems, convulsions &amp; dystonic movements Option B. Whipple's disease is also known as insulinoma. Whipple's triad includes - hypoglycemia, low blood plasma glucose concentration, and relief of symptoms when plasma glucose concentration is increased. Option C. Autoimmune liver disease is characterized by hypergammaglobulinemia, presence of circulating autoantibodies, interphase hepatitis on biopsy &amp; response to immune suppressive agents. The condition is common in girls, the following 2 types of autoimmune hepatitis are recognized : Type 1 autoimmune hepatitis - the presence of an antibody &amp; anti-smooth muscle antibody, constitutes 60-70 % of cases. Type 1 autoimmune hepatitis - the presence of anti-liver-kidney microsomal antibody (lkm), accounts for 20-30 % of cases. Clinical features : Acute viral hepatitis with malaise, nausea, vomiting &amp; jaundice Insidious onset liver disease with progressive fatigue, relapsing, or prolonged jaundice Chronic liver disease with splenomegaly, ascites, hepatic encephalopathy</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 12-year-old boy with h/o loss of appetite &amp; diarrhea after having chapati in a hotel. Duodenal biopsy revealed decreased villous-to-crypt ratio. Which of the following antibodies is least likely to be present in this diagnosis?", "options": [{"label": "A", "text": "Anti-endomysial antibody", "correct": false}, {"label": "B", "text": "Anti-neutrophil cytoplasmic antibody", "correct": true}, {"label": "C", "text": "Anti-ttg antibody", "correct": false}, {"label": "D", "text": "Anti-gliadin antibody", "correct": false}], "correct_answer": "B. Anti-neutrophil cytoplasmic antibody", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Anti-neutrophil cytoplasmic antibody Based on the above case scenario diagnosis is celiac disease. This is an enteropathy caused by a permanent sensitivity to gluten in genetically susceptible subjects. It is the most common cause of chronic diarrhea in children over 2 years of age. Clinical features : Small bowel diarrhea Growth failure Anemia (refractory iron deficiency or dimorphic anemia) Short stature, delayed puberty, rickets, osteopenia Examination reveals a failure to thrive, loss of subcutaneous fat, clubbing Diagnosis : Serology Autoantibodies present in it are - in an against ttg, recommended for initial testing of celiac disease. Ig an antiendomysial antibody Anti gliadin antibody Anti-neutrophil cytoplasmic antibody (ANCA) - is seen in conditions like Wegener's granulomatosis, microscopic polyangiitis &amp; ulcerative colitis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 9-year-old child was diagnosed with celiac disease. Upon investigation, an IGA TTG antibody was found. Which of the following is not a clinical feature of this condition?", "options": [{"label": "A", "text": "Delayed puberty", "correct": false}, {"label": "B", "text": "Osteomalacia", "correct": true}, {"label": "C", "text": "Failure to thrive", "correct": false}, {"label": "D", "text": "Osteopenia", "correct": false}], "correct_answer": "B. Osteomalacia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Osteomalacia Celiac disease is an enteropathy caused by a permanent sensitivity to gluten in genetically susceptible subjects. It is the most common cause of chronic diarrhea in children over 2 years of age. Clinical features : Small bowel diarrhea Growth failure Anemia (refractory iron deficiency or dimorphic anemia) Short stature, delayed puberty, rickets, osteopenia Examination reveals a failure to thrive, loss of subcutaneous fat, clubbing</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child with acute hepatitis b has recovered from the infection 2 months back. Identify the serological marker marked in the image below.", "options": [{"label": "A", "text": "Anti-b antibody", "correct": false}, {"label": "B", "text": "Anti-hbs antibody", "correct": false}, {"label": "C", "text": "Hbsag", "correct": false}, {"label": "D", "text": "Anti-hbc antibody", "correct": true}], "correct_answer": "D. Anti-hbc antibody", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884061571-QTDK037014IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Anti-hbc antibody The serological marker marked in the image is anti-hbc antibody. It remains elevated for a long period after recovery from infection. Anti-hbc is readily demonstratable in serum, beginning within the first 1-2 weeks after the appearance of HBsAg. It precedes detectable levels of anti hbs by weeks to months. Ig m anti-hbc ag antibody - seen early in infection (about 6 months) Ig- g anti-hbc ag antibody - seen later in the infection (after 6 months) Commonly Encountered Serologic Patterns of Hepatitis B Infection HBsAg ANTI-HES ANTI-HBc HBeAg ANTI-HBe INTERPRETATION + - IgM + - Acute hepatitis B, high infectivity + - IgG + - Chronic hepatitis B, high infectivity + - IgG - + 1. Late acute or chronic hepatitis B, low infectivity 2. HBeAg-negative (\"precore-mutant\") hepatitis B (chronic or, rarely, acute) + + + +/- +/- 1. HBsAg of one subtype and heterotypic anti-HBs (common) 2. Process of seroconversion from HBsAg to anti-HBs (rare) - - IgM +/- +/- 1. Acute hepatitis B 2. Anti-HBc \"window\" - - IgG - +/- 1. Low level hepatitis B carrier 2. Hepatitis B in remote past - + IgG - +/- Recovery from hepatitis B - + - - - 1. Immunization with HBsAg (after vaccination) 2. Hepatitis B in the remote past (?) 3. False-positive \"IgM anti-HBc may reappear during acute reactivation of chronic hepatitis B. Note: See text for abbreviations.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 20 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 21 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "All of the following are features seen in Kwashiorkor except", "options": [{"label": "A", "text": "Apathy", "correct": false}, {"label": "B", "text": "Moon facies", "correct": false}, {"label": "C", "text": "Pitting edema", "correct": false}, {"label": "D", "text": "Voracious appetite", "correct": true}], "correct_answer": "D. Voracious appetite", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Voracious appetite Kwashiorkor- The child may have a fat sugar baby appearance, Pitting edema. Smooth tongue, cheilosis and angular stomatitis, flaky paint dermatosis. Mental changes: Includes unhappiness, apathy or irritability with a sad, intermittent cry. They show no signs of hunger, and it is difficult to feed them. Because of edema they have round moon facies.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old child is brought by a mother with a c/o poor weight gain. On examination, the child looks thin, emaciated, and alert and has sparse hypopigmented hairs, as shown in the image below. The mother informs that the child is hungry and eats well when food is given. What is the likely diagnosis?", "options": [{"label": "A", "text": "Kwashiorkor", "correct": false}, {"label": "B", "text": "Marasmus", "correct": true}, {"label": "C", "text": "Marasmic kwashiorkor", "correct": false}, {"label": "D", "text": "Marasmic marasmus", "correct": false}], "correct_answer": "B. Marasmus", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882811707-QTDK009002IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Marasmus This child has severe wasting with no edema, alert child, wrinkles on the skin due to subcutaneous fat loss and a voracious All these features are classical marasmus. In kwashiorkor, the child will be edematous, apathetic or irritable with a poor appetite.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Flag sign is seen in which of the following conditions?", "options": [{"label": "A", "text": "Kwashiorkor", "correct": true}, {"label": "B", "text": "Marasmus", "correct": false}, {"label": "C", "text": "Vitamin A deficiency", "correct": false}, {"label": "D", "text": "Vitamin B12 deficiency", "correct": false}], "correct_answer": "A. Kwashiorkor", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Kwashiorkor Alternating hypo and hyperpigmentation of the hair is the Flag sign and is seen in Kwashiorkor. In this disorder, hair is often lustreless, easily pluckable and has a dry look.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is not an admission criterion in a child with severe acute malnutrition?", "options": [{"label": "A", "text": "Preserved appetite", "correct": true}, {"label": "B", "text": "Persistent vomiting", "correct": false}, {"label": "C", "text": "Severe edema", "correct": false}, {"label": "D", "text": "Pneumonia", "correct": false}], "correct_answer": "A. Preserved appetite", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Preserved appetite Admission criteria in a child with severe acute malnutrition SAM are Lack of appetite Danger signs such as inability to drink, persistent vomiting, convulsions or H/O convulsions, unconsciousness Severe edema Complications like pneumonia, convulsions etc.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year-old male child was evaluated for poor weight gain and diagnosed with severe acute malnutrition. On examination, alert children with no edema have a good appetite and no complications. All of the following should be included in his treatment plan except:", "options": [{"label": "A", "text": "Oral Amoxicillin for five days", "correct": false}, {"label": "B", "text": "Vitamin A", "correct": false}, {"label": "C", "text": "Albendazole", "correct": false}, {"label": "D", "text": "Oral Zinc", "correct": true}], "correct_answer": "D. Oral Zinc", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Oral Zinc This child has uncomplicated severe acute malnutrition (SAM), and only home management is sufficient. 4A’s in the treatment plan are Amoxicillin for five days Vitamin A Albendazole single dose Age appropriate vaccines</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the daily calorie requirement for a child with severe acute malnutrition (SAM) during home management?", "options": [{"label": "A", "text": "150kcal/kg", "correct": false}, {"label": "B", "text": "175kcal/kg", "correct": true}, {"label": "C", "text": "200kcal/kg", "correct": false}, {"label": "D", "text": "100kcal/kg", "correct": false}], "correct_answer": "B. 175kcal/kg", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>175kcal/kg The Mainstay of home management is nutritional rehabilitation with high-energy food (Ready-to-use therapeutic food [RUTF] or Home-based food). The energy requirement is 175kcal /kg/day from home-based foods or RUTF.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In a child with severe acute malnutrition, blood glucose below what level is called hypoglycemia?", "options": [{"label": "A", "text": "40mg/dl", "correct": false}, {"label": "B", "text": "44mg/dl", "correct": false}, {"label": "C", "text": "54mg/dl", "correct": true}, {"label": "D", "text": "60mg/dl", "correct": false}], "correct_answer": "C. 54mg/dl", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>54mg/dl Blood glucose &lt; 54 mg/dl is defined as hypoglycemia in a child with SAM, whereas &lt; 40 mg/dl of blood glucose is defined as hypoglycemia in neonates.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old child with severe acute malnutrition has hypothermia, lethargy and one episode of convulsions. On examination, blood glucose is 30mg/dl. BP – 90/60 mmHg, HR- 170/min, RR- 28/min. What is the immediate next line of management?", "options": [{"label": "A", "text": "Oral sucrose", "correct": false}, {"label": "B", "text": "IV 10%D 5ml/kg", "correct": true}, {"label": "C", "text": "IV 5% D 5ml/kg", "correct": false}, {"label": "D", "text": "IV 25%D 5ml/kg", "correct": false}], "correct_answer": "B. IV 10%D 5ml/kg", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>IV 10%D 5ml/kg This child has symptoms of hypoglycemia and should be given IV dextrose 10% 5ml/kg bolus. Symptoms of hypoglycemia manifest as lethargy , unconsciousness, seizures, peripheral circulatory failure or hypothermia. In asymptomatic hypoglycemia, glucose or sucrose solution is given orally, followed by the first feed.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "How many calories are present in F-75 feeds?", "options": [{"label": "A", "text": "100 kcal /100 ml", "correct": false}, {"label": "B", "text": "75 Kcal/100 ml", "correct": true}, {"label": "C", "text": "100 kcal/75 ml", "correct": false}, {"label": "D", "text": "75kcal/75 ml", "correct": false}], "correct_answer": "B. 75 Kcal/100 ml", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>75 Kcal/100 ml Feeding should be initiated very carefully. Should start with the containing 75 kcal/100ml and 0.9 g of proteins /100ml every 2nd hourly. F-75 formula Once the child tolerates F 75, then go for F 100.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Hypothermia in a child of SAM is defined as a rectal temperature less than:", "options": [{"label": "A", "text": "36 degrees C", "correct": false}, {"label": "B", "text": "35.5 degrees C", "correct": true}, {"label": "C", "text": "35 degrees C", "correct": false}, {"label": "D", "text": "34 degrees C", "correct": false}], "correct_answer": "B. 35.5 degrees C", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>35.5 degrees C Rectal temperature less than &lt; 35.5°C or 95.5°F or axillary temperature less than 35°C or 95° is defined as hypothermia in a child of severe acute malnutrition (SAM).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year-old child with severe acute malnutrition(SAM) presented with dehydration and shock in the ER. What is the fluid of choice for shock correction?", "options": [{"label": "A", "text": "0.9% NS", "correct": false}, {"label": "B", "text": "0.45% NS", "correct": false}, {"label": "C", "text": "0.9% NS with dextrose", "correct": false}, {"label": "D", "text": "RL with 5% dextrose", "correct": true}], "correct_answer": "D. RL with 5% dextrose", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>RL with 5% dextrose IV fluids should not be given in severe acute malnutrition (SAM) unless the child is in shock. Hence, even severe dehydration without shock in a child of SAM should be managed with an oral rehydration solution appropriately designed for them. RL with 5%D OR 0.45%NS with 5%D at 15ml/kg over 1 hour given in shock If there is an improvement, repeat another 15ml/kg, then switch to oral rehydration solution (ORS) through the NG tube.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the oral rehydration fluid of choice in a child with severe acute malnutrition?", "options": [{"label": "A", "text": "Half strength low osmolality WHO ORS", "correct": true}, {"label": "B", "text": "Full strength low osmolality WHO ORS", "correct": false}, {"label": "C", "text": "Half strength High osmolarity WHO ORS", "correct": false}, {"label": "D", "text": "10% dextrose", "correct": false}], "correct_answer": "A. Half strength low osmolality WHO ORS", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Half strength low osmolality WHO ORS Children with severe acute malnutrition who present with some dehydration or severe dehydration and are not in shock should be rehydrated slowly using oral rehydration solution ORS for malnourished children. Dissolve one standard WHO low-osmolarity oral rehydration solution sachet in 2 L water (instead of 1 L). Add 1 level scoop of commercially available combined minerals and vitamins mix or 40 mL of mineral mix solution, and add and dissolve 50 g of sugar.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1 1/2-year-old child with severe acute malnutrition (SAM) was admitted to the ward for management. On evaluation, blood glucose was 60mg/dl, the temperature was normal, and the pulse volume was good with no shock. K+= 2.5 mEq/l, Na- 132meq/l. An ECG was done that showed evidence of hypokalemia. How will you correct potassium in this child?", "options": [{"label": "A", "text": "Oral potassium chloride three mEq/kg/day", "correct": false}, {"label": "B", "text": "IV potassium bolus 3 mEq/kg", "correct": false}, {"label": "C", "text": "IV potassium infusion 0.3 mEq/kg/hr", "correct": true}, {"label": "D", "text": "No need for immediate potassium correction", "correct": false}], "correct_answer": "C. IV potassium infusion 0.3 mEq/kg/hr", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>IV potassium infusion 0.3 mEq/kg/hr If serum K is &lt; 2 mEq/l or &lt; 3.5 mEq/l with Electrocardiogram ECG changes, immediate treatment with IV potassium infusion 0.3-0.5 mEq/kg/hr, preferably with continuous ECG monitoring. It should never be given as an iv bolus. Once severe hypokalemia is corrected, all severely malnourished children should receive supplemental potassium 3-4meq/kg orally as potassium chloride solution.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which micronutrients should not be added to the initial stabilisation phase in managing severe acute malnutrition?", "options": [{"label": "A", "text": "Copper", "correct": false}, {"label": "B", "text": "Iron", "correct": true}, {"label": "C", "text": "Folic acid", "correct": false}, {"label": "D", "text": "Zinc", "correct": false}], "correct_answer": "B. Iron", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Iron Iron, 3 mg/kg/day, should never be added in the stabilisation phase as it may increase the risk of infections. Other micronutrients supplemented are Folic acid- 1mg/day; Zinc 2 mg/kg/day; Copper 0.2-0.3 mg/kg/day.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the dose of Vitamin K to be administered to a child with severe acute malnutrition(SAM)?", "options": [{"label": "A", "text": "1mg", "correct": false}, {"label": "B", "text": "2.5mg", "correct": true}, {"label": "C", "text": "5mg", "correct": false}, {"label": "D", "text": "10mg", "correct": false}], "correct_answer": "B. 2.5mg", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2.5mg Vitamin K should be administered in a single dose of 2.5 mg intramuscularly at admission in all children with severe acute malnutrition(SAM).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old child has been admitted to the ward to manage severe acute malnutrition. All of the following are discharge criteria for this child except:", "options": [{"label": "A", "text": "MUAC &gt; 12.5 cm", "correct": false}, {"label": "B", "text": "Weight for height more than – 2SD", "correct": false}, {"label": "C", "text": "No edema for the past two weeks", "correct": false}, {"label": "D", "text": "Weight gain 5g/kg/day", "correct": true}], "correct_answer": "D. Weight gain 5g/kg/day", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Weight gain 5g/kg/day A child with SAM is considered to have completed treatment and is ready for discharge when There has been no edema for two weeks plus MUAC &gt;12.5 cm or Weight for height &gt;/= -2SD</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Primary failure of treatment in Systolic anterior motion SAM management is indicated by all of the following except", "options": [{"label": "A", "text": "Failure to regain appetite by day 4", "correct": false}, {"label": "B", "text": "Failure to start losing edema by day 4", "correct": false}, {"label": "C", "text": "Presence of edema on day 10", "correct": false}, {"label": "D", "text": "Failure to gain at least 15 g/kg/day by day 10", "correct": true}], "correct_answer": "D. Failure to gain at least 15 g/kg/day by day 10", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Failure to gain at least 15 g/kg/day by day 10 Primary treatment failure is indicated by Failure to regain appetite by day 4 Failure to start losing edema by day 4 Presence of edema on day 10 Failure to gain at least 5 g/kg/day by day 10</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is a sign of secondary treatment failure in Systemic anterior motion SAM management?", "options": [{"label": "A", "text": "Presence of edema on day 10", "correct": false}, {"label": "B", "text": "Failure to start losing edema by day 4", "correct": false}, {"label": "C", "text": "Failure to gain 5g/kg/day for 3 consecutive days", "correct": true}, {"label": "D", "text": "Failure to gain 15g/kg/day for 3 consecutive days", "correct": false}], "correct_answer": "C. Failure to gain 5g/kg/day for 3 consecutive days", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Failure to gain 5g/kg/day for 3 consecutive days Secondary failure is indicated by Failure to gain at least 5g/kg/day for consecutive days during rehabilitation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year-old child presents with loose stools. On examination, she has signs of severe dehydration. If her weight is 10 kg, what would be the volume of fluid to be given in the first 4 hours?", "options": [{"label": "A", "text": "1000ml", "correct": true}, {"label": "B", "text": "100 ml", "correct": false}, {"label": "C", "text": "200 ml", "correct": false}, {"label": "D", "text": "500 ml", "correct": false}], "correct_answer": "A. 1000ml", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1000ml In a child with severe dehydration, fluid given over the 1st 30 mins is 30ml/kg over the next 2 and half hours is 70 ml/ kg. So fluid given over 3 hours is 100 ml./ Kg. In this case, the weight of the child is 10 kg, so the amount of fluid given is 10*100 - 1000ml</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Kallu, a 2-year-old child weighing 6.7kgs, presents in the casualty with a history of vomiting and diarrhoea for the last Two days. On examination, the skin pinch over the anterior abdominal wall goes quickly to its original position. Interpretation of the skin pinch test in this child will be?", "options": [{"label": "A", "text": "No dehydration", "correct": false}, {"label": "B", "text": "Some dehydration", "correct": false}, {"label": "C", "text": "Severe dehydration", "correct": false}, {"label": "D", "text": "Skin pinch cannot be evaluated in this child", "correct": true}], "correct_answer": "D. Skin pinch cannot be evaluated in this child", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Skin pinch cannot be evaluated in this child The child given in the question weights 6.7kgs at 2 years, against the expected weight of 12 kgs( 2*2 +8=12).</p>\n<p><strong>Highyeild:</strong></p><p>So this child is malnourished .for the assessment of dehydration in a malnourished child, skin pinch is less valuable. Skin pinch in various conditions No dehydration- goes back quickly Some dehydration- goes back slowly Severe dehydration- goes back very slowly. But this is not reliable in the case of severely malnourished children and obese children.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An alert 6-month-old child is brought with vomiting and diarrhoea. Rr -45/min, hr- 130/min,sbp- 85 mmhg. Capillary refilling time is 4 seconds. Diagnosis is?", "options": [{"label": "A", "text": "Early compensated hypovolemic shock", "correct": true}, {"label": "B", "text": "Early decompensated hypovolemic shock", "correct": false}, {"label": "C", "text": "Late compensated hypovolemic shock", "correct": false}, {"label": "D", "text": "Late decompensated shock due to Supraventricular tachycardia (SVT)", "correct": false}], "correct_answer": "A. Early compensated hypovolemic shock", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Early compensated hypovolemic shock This is a case of hypovolemia, with a history of vomiting and diarrhoea.</p>\n<p><strong>Highyeild:</strong></p><p>In this case, the infant has poor peripheral perfusion(shock), as evident from a prolonged capillary refill time but the incomplete sentence. BP IS NORMAL, so it's a compensated shock. Hypotension is a systemic blood pressure less than the 5th percentile of normal for age, as given below. &lt; 60 mmHg in term neonates(0-28days) &lt; 70 mmHg in infants &lt; 70mmhg + (2*age in years) in children 1-10 yrs &lt; 90 mmHg for &gt; 10 yrs of age</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 31 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 17 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A neonate presents with seizures 72 hours after birth. The neonate is jittery, hyper-alert and has a high-pitched cry. The pediatrician on duty suspects hypoglycemia as the underlying cause of seizures and a blood sugar sample is promptly sent to the lab for testing. Neonatal hypoglycemia will be confirmed if his blood sugar level will be less than.", "options": [{"label": "A", "text": "60mg/dl", "correct": false}, {"label": "B", "text": "55mg/dl", "correct": false}, {"label": "C", "text": "45mg/dl", "correct": false}, {"label": "D", "text": "40mg/dl", "correct": true}], "correct_answer": "D. 40mg/dl", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>40mg/dl Neonatal hypoglycemia is a common metabolic disorder , particularly common in preterms, IUGR babies, infants of diabetic mothers and sick babies.</p>\n<p><strong>Highyeild:</strong></p><p>Hypoglycemia in neonates is defined as a blood sugar less than 40 mg/dl (or plasma glucose less than 45 mg/dl). Screening for blood sugar is mandatory in all high-risk neonates (enumerated above) as neonatal hypoglycemia is often asymptomatic.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the maximum glucose infusion rate that can be given to a neonate through the peripheral IV line?", "options": [{"label": "A", "text": "8mg/kg/min", "correct": false}, {"label": "B", "text": "10mg/kg/min", "correct": false}, {"label": "C", "text": "12 mg/kg/min", "correct": true}, {"label": "D", "text": "14 mg/kg /min", "correct": false}], "correct_answer": "C. 12 mg/kg/min", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>12 mg/kg/min Hypoglycemic episodes in neonates can be managed by starting glucose infusion at 6 mg/kg/min and increasing the glucose infusion rate by 2 mg/kg/min until a maximum of 12 mg/kg/min is reached. In case neonates require a higher glucose infusion rate (above 12 mg/kg/min), a central IV line should be used.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the most commonly cited underlying cause for the phenomenon shown in the picture below", "options": [{"label": "A", "text": "Early-onset asphyxia", "correct": false}, {"label": "B", "text": "Temporary imbalance in the autonomic regulatory system", "correct": true}, {"label": "C", "text": "Temporary low surface temperature immediately after birth", "correct": false}, {"label": "D", "text": "Septicemia", "correct": false}], "correct_answer": "B. Temporary imbalance in the autonomic regulatory system", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883391129-QTDK018003IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Temporary imbalance in the autonomic regulatory system This phenomenon represents a Harlequin colour It presents as a well-demarcated colour change, with one half of the body displaying erythema and the other half pallor.</p>\n<p><strong>Highyeild:</strong></p><p>The presence of this phenomenon is not always pathological, and it may be transiently noted in about 10% of healthy newborns. It has also been reported with prematurity , Low Birth Weight LBW, hypoxia, and intracranial injury. Although the precise cause remains unknown, it may be related to a temporary imbalance in the tone of cutaneous blood vessels secondary to hypothalamic immaturity.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these neonatal reflexes Appears after birth?", "options": [{"label": "A", "text": "Asymmetric tonic neck reflex (ATNR)", "correct": false}, {"label": "B", "text": "Moro’s reflex", "correct": false}, {"label": "C", "text": "Grasp reflex", "correct": false}, {"label": "D", "text": "Symmetric tonic neck reflex", "correct": true}], "correct_answer": "D. Symmetric tonic neck reflex", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Symmetric tonic neck reflex Neonatal reflexes that do not appear in the intrauterine period and therefore are not present at birth are not called primitive reflexes. Two important neonatal reflexes which appear after birth and therefore are not primitive are the symmetric tonic neck reflex and parachute reflex.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which is the most common congenital malformation in the baby of a diabetic mother?", "options": [{"label": "A", "text": "Ventricular septal defect(VSD)", "correct": true}, {"label": "B", "text": "Myelomeningocele", "correct": false}, {"label": "C", "text": "Anencephaly", "correct": false}, {"label": "D", "text": "Sacral agenesis", "correct": false}], "correct_answer": "A. Ventricular septal defect(VSD)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ventricular septal defect(VSD) Congenital heart defects are common in infants of diabetic mothers; in fact, the cardiovascular system is the most common organ system affected in infants of diabetic mothers. Although the relative prevalence of different congenital heart defects in these children is debatable, the most common Congenital heart defect (CHD) in them is believed to be ventricular septal defec t (VSD); the most specific is believed to be Transposition of the great arteries (TGA), and the least common is Autism spectrum disorder (ASD). Additionally, cardiomyopathy with ventricular hypertrophy and outflow tract obstruction is also common and seen in up to 30% of infants with diabetic mothers.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which disorder in the mother, among these leads to delayed fetal lung maturity?", "options": [{"label": "A", "text": "Heart diseases", "correct": false}, {"label": "B", "text": "Diabetes", "correct": true}, {"label": "C", "text": "Thalassemia minor", "correct": false}, {"label": "D", "text": "Epilepsy", "correct": false}], "correct_answer": "B. Diabetes", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Diabetes Poorly-controlled diabetes in pregnancy may delay fetal lung maturity, although reports indicate that diabetic women with good glycemic control have fetal lung maturation at the same age as those non-diabetic women. The precise mechanism remains unknown however abnormalities in the pulmonary surfactant system seem to be involved. Metabolic disruption in maternal diabetes is associated with major neonatal complications such as immature lung tissue and respiratory distress syndrome.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Cephalhematoma usually disappears by", "options": [{"label": "A", "text": "3-5 months", "correct": false}, {"label": "B", "text": "2-5 weeks", "correct": false}, {"label": "C", "text": "1-3 weeks", "correct": false}, {"label": "D", "text": "5-7 weeks", "correct": true}], "correct_answer": "D. 5-7 weeks", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>5-7 weeks Cephalhematoma is blood collection under the scalp (primarily between the periosteum and the bone); its boundaries are defined by the underlying bone , it is confined to the area on top of one of the cranial bones and does not cross the midline or the suture lines. The swelling of a cephalohematoma appears later than caput secundum, and it persists for a prolonged period of time (up to 5-7 weeks). Characteristic Caput succedaneum Cephalhematoma Incidence Common Less common Location Subcutaneous plane Between skull and periosteum (commonly seen over parietal bones) Time of presentation Maximum size and firmness at birth Increasing size for 12-24 hours and then stable Time to resolution Within 2-3 days 3-6 weeks Characteristic finding Diffuse, crosses suture line Does not cross suture line</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In all of the following indications exchange transfusion may be considered except", "options": [{"label": "A", "text": "Serum bilirubin 22 mg/dl in a 36-hour old term neonate", "correct": false}, {"label": "B", "text": "Cord hemoglobin &lt; 10 gm/dl", "correct": false}, {"label": "C", "text": "Cord bilirubin &lt; 5 mg/dl", "correct": true}, {"label": "D", "text": "Serum bilirubin 18 mg/dl in a 1.2 kg preterm neonate at 48 hours", "correct": false}], "correct_answer": "C. Cord bilirubin < 5 mg/dl", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Cord bilirubin &lt; 5 mg/dl Indications for Double Volume Exchange Transfusion (DVET) at birth are cord bilirubin &gt; 5 mg/dl (and not &lt; 5 mg/dl) and cord hemoglobin &lt; 10 gm/dl. DVET should be performed (DVET) if the total serum bilirubin(TSB) levels reach the age-specific cut-off for exchange transfusion or the infant shows signs of bilirubin encephalopathy.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Not a correct sign of good attachment of the baby to the breast", "options": [{"label": "A", "text": "Baby’s mouth wide open", "correct": false}, {"label": "B", "text": "Lower areola more visible", "correct": true}, {"label": "C", "text": "Baby’s lower lip everted", "correct": false}, {"label": "D", "text": "Bab’s chin touching the breast", "correct": false}], "correct_answer": "B. Lower areola more visible", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Lower areola more visible The 4 important signs of a baby’s attachment to the breast are: More of the areola is visible above the newborn’s upper lip than below the lower lip. The Newborn’s mouth is wide open Newborn’s lower lip everted. A Newborn’s chin is touching or almost touching the breast.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1.5 kg neonate born at 32 weeks by Lower segment cesarean section (LSCS) has moderate respiratory difficulty with a respiratory rate of 66/minute. There are minimal chest retractions. Which of these is the most appropriate next line of management?", "options": [{"label": "A", "text": "Mechanical ventilation", "correct": false}, {"label": "B", "text": "Continuous positive airway pressure (CPAP)", "correct": true}, {"label": "C", "text": "Surfactant by INSURE technique", "correct": false}, {"label": "D", "text": "Warm humidified oxygen", "correct": false}], "correct_answer": "B. Continuous positive airway pressure (CPAP)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Continuous positive airway pressure (CPAP) Indications for CPAP in a neonate with HMD are mild respiratory distress, paO2 &lt; 50 mmHg, gestational maturity &gt; 30-32 weeks and weight &gt; 1.5 kg. On the other hand, the indication for surfactant administration is severe respiratory distress and gestational maturity &lt; 28 weeks.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Neonate 33 weeks gestation will best be provided feeding with", "options": [{"label": "A", "text": "IV fluids", "correct": false}, {"label": "B", "text": "Orogastric feeds", "correct": false}, {"label": "C", "text": "Spoon/Palidae feeds", "correct": true}, {"label": "D", "text": "Breastfeeding", "correct": false}], "correct_answer": "C. Spoon/Palidae feeds", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Spoon/Palidae feeds Gestational maturity &gt; 34 weeks – Breastfeeding; Gestational maturity 32-34 weeks – Spoon/Palidae feeding Gestational maturity 28-31 weeks – Orogastric/nasogastric feeds Gestational maturity &lt; 28 weeks – IV fluids.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-day neonate admitted to the nursery develops signs of neonatal sepsis. Which of these is the most likely source of infection?", "options": [{"label": "A", "text": "Local nursery environment", "correct": true}, {"label": "B", "text": "Umbilical cord", "correct": false}, {"label": "C", "text": "Gastrointestinal tract", "correct": false}, {"label": "D", "text": "Maternal vaginal flora", "correct": false}], "correct_answer": "A. Local nursery environment", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Local nursery environment Neonatal sepsis is a bloodstream infection in a neonate. Early-onset sepsis refers to sepsis in neonates at or before 72 hours of life, and late-onset sepsis is defined as sepsis occurring at or after 72 hours of life.</p>\n<p><strong>Highyeild:</strong></p><p>Early-onset sepsis results from the transmission of pathogens from the female genitourinary system to the fetus/newborn, main organisms including Group B streptococcus , Escherichia coli, coagulase-negative Staphylococcus, and Listeria monocytogenes. Late-onset sepsis usually results from the transmission of pathogens from the environment after delivery, Coagulase-negative staphylococcal species being the commonest cause accounting for &gt; 50% of cases.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In a child of 9 months, the persistence of which neonatal reflex is most likely abnormal?", "options": [{"label": "A", "text": "Parachute reflex", "correct": false}, {"label": "B", "text": "Symmetric tonic neck reflex", "correct": false}, {"label": "C", "text": "Asymmetric tonic neck reflex (ATNR)", "correct": true}, {"label": "D", "text": "Persistence of all of these is abnormal", "correct": false}], "correct_answer": "C. Asymmetric tonic neck reflex (ATNR)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Asymmetric tonic neck reflex (ATNR) Asymmetric tonic neck reflex (ATNR) should disappear by 5-6 months symmetric tonic neck reflex disappears by 8-9 months; parachute reflex persists throughout life. Therefore in a 9-month-old child, the persistence of Asymmetric tonic neck reflex (ATNR) is definitely abnormal.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Respiratory distress of hyaline membrane disease most commonly appears", "options": [{"label": "A", "text": "In the first 6 hours of birth", "correct": true}, {"label": "B", "text": "12-24 hours of birth", "correct": false}, {"label": "C", "text": "24-48 hours after birth", "correct": false}, {"label": "D", "text": "&gt; 48 hours of birth", "correct": false}], "correct_answer": "A. In the first 6 hours of birth", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>In the first 6 hours of birth Hyaline membrane disease (HMD) is a common cause of respiratory distress in the premature infants ; however, it is also seen in infants whose mothers have diabetes during pregnancy.</p>\n<p><strong>Highyeild:</strong></p><p>The characteristic presentation of (HMD) Hyaline membrane diseases is respiratory distress starting within a few hours of birth (usually within 6 hours of birth) associated with tachypnea, nasal flaring, grunting, and subcostal, intercostal, and/or suprasternal retractions.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The intravenous dose of epinephrine (1:10000) recommended in neonatal resuscitation is", "options": [{"label": "A", "text": "0.05-0.1 ml/kg", "correct": false}, {"label": "B", "text": "0.05-0.1 mg/kg", "correct": false}, {"label": "C", "text": "0.1-0.3 ml/kg", "correct": true}, {"label": "D", "text": "0.1-0.3 mg/kg", "correct": false}], "correct_answer": "C. 0.1-0.3 ml/kg", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>0.1-0.3 ml/kg For neonatal resuscitation, epinephrine (1:10000) dilution should be used. The IV dose is 0.1-0.3 ml/kg or 0.01-0.03 mg/kg. The dose through the endotracheal is 0.5-1 ml/kg or 0.05-0.1 mg/kg.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is unlikely to lead to Transient tachypnea of the newborn(TTNB)", "options": [{"label": "A", "text": "Infants of diabetic mother", "correct": false}, {"label": "B", "text": "Precipitous delivery", "correct": false}, {"label": "C", "text": "Cesarean section", "correct": false}, {"label": "D", "text": "Mother with a heart defect", "correct": true}], "correct_answer": "D. Mother with a heart defect", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Mother with a heart defect TTNB is a frequent cause of early respiratory distress in term and late-preterm infants resulting from impaired fetal lung fluid clearance. Usually, the fetal lung is filled with fluid however late in the gestational period (immediately before birth) the chloride and fluid-secreting channels in the lung epithelium are reversed so that fluid absorption predominates and fluid is removed from the lungs. Therefore neonates delivered before labour onset (elective cesarean sections, precipitous delivery) have a high risk of fluid retaining inside the lungs leading to Transient tachypnea of the newborn (TTNB). The risk of Transient tachypnea of the newborn(TTNB) is also higher in infants of diabetic mothers.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Wrong statement about chest compression in a neonate", "options": [{"label": "A", "text": "Should be started at a heart rate (HR) &lt; 100/minute", "correct": true}, {"label": "B", "text": "Two-thumb technique preferred", "correct": false}, {"label": "C", "text": "Chest compression to ventilation rate 3:1", "correct": false}, {"label": "D", "text": "Performed with 100% oxygen", "correct": false}], "correct_answer": "A. Should be started at a heart rate (HR) < 100/minute", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Should be started at a heart rate (HR) &lt; 100/minute Chest compression is an important step in neonatal resuscitation , its main indication being neonatal HR &lt; 60/minute. While both the “two thumb technique” and “two finger technique” can be used, the “two thumb technique” is preferred for neonatal chest compression. Chest compression: ventilation rate should be 3:1 in neonates, and chest compression should be performed with 100% oxygen (otherwise room air in terms and 21-30% oxygen in preterms &lt; 35 weeks gestation).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 27 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 12 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Children start sitting in a tripod position first at the age of", "options": [{"label": "A", "text": "3 months", "correct": false}, {"label": "B", "text": "6 months", "correct": true}, {"label": "C", "text": "9 months", "correct": false}, {"label": "D", "text": "12 months", "correct": false}], "correct_answer": "B. 6 months", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>6 months Children first start sitting with support at about 5 months. They gradually sit with their arms forward for support (tripod position) by about 6 months, but can sit without support by the age of 8 months.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child has recently learned to walk without support and creep on stairs. He can jargon, but not form sentences. Considering him to be developmentally normal, which of these additional milestones is likely to be present in this child?", "options": [{"label": "A", "text": "Run on level ground", "correct": false}, {"label": "B", "text": "Climb stairs", "correct": false}, {"label": "C", "text": "Build a tower of 2 cubes", "correct": true}, {"label": "D", "text": "Know gender", "correct": false}], "correct_answer": "C. Build a tower of 2 cubes", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Build a tower of 2 cubes Children can walk without support by 13-15 months; creep on stairs by 15 months; and jargon by 15 months. This child appears to have a developmental age of 15 months. He is not able to form sentences (which is possible by 2 years of age). Children run on level ground by 18 months; climb stairs starting at 2 years; know their gender by 3 years; and build a tower of 2 cubes by 15 months.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Absence of which of these milestones will engender the greatest concern in a 6-month-old child?", "options": [{"label": "A", "text": "Vocalization", "correct": true}, {"label": "B", "text": "Standing", "correct": false}, {"label": "C", "text": "Sitting", "correct": false}, {"label": "D", "text": "Transferring objects", "correct": false}], "correct_answer": "A. Vocalization", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Vocalization The child should start vocalizing by 1-2 months of age. The absence of vocalization at 6 months is a reason for concern. 6 months is also the upper limit of the age of attainment of this milestone. Sitting starts from about 5-6 months; standing from 9 months; and transferring objects by 6-7 months.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the time of the first attainment of this milestone shown in the Image", "options": [{"label": "A", "text": "6-9 months", "correct": false}, {"label": "B", "text": "9-12 months", "correct": false}, {"label": "C", "text": "15-18 months", "correct": true}, {"label": "D", "text": "2-3 years", "correct": false}], "correct_answer": "C. 15-18 months", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884156717-QTDK040005IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>15-18 months The Image shows a child scribbling. Children first are able to scribble by 15-18 months of age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the earliest age of attainment of this milestone shown in the Image", "options": [{"label": "A", "text": "5 months", "correct": false}, {"label": "B", "text": "6 months", "correct": true}, {"label": "C", "text": "8 months", "correct": false}, {"label": "D", "text": "9-12 months", "correct": false}], "correct_answer": "B. 6 months", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884156882-QTDK040006IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>6 months The Image shows a child holding objects Palmar grasp, first attained at 6 months of age</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child is able to copy a cross, build a bridge but not a gate with blocks, make a tower of 10 cubes, and walk alternate feet on stairs. What is the approximate developmental age of the child?", "options": [{"label": "A", "text": "2 years", "correct": false}, {"label": "B", "text": "3 years", "correct": false}, {"label": "C", "text": "4 years", "correct": true}, {"label": "D", "text": "5 years", "correct": false}], "correct_answer": "C. 4 years", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>4 years Children can copy a cross at 4 years; build a bridge with blocks at 4 years and a gate with blocks at 5 years; make a tower of 10 cubes at 3 years and walk alternate feet on stairs at 4 years. Therefore, the child’s developmental age is 4 years.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following statements is wrong about breast milk (compared to cow’s milk)?", "options": [{"label": "A", "text": "Higher carbohydrates", "correct": false}, {"label": "B", "text": "Equivalent fats", "correct": false}, {"label": "C", "text": "Higher proteins", "correct": true}, {"label": "D", "text": "Predominant whey protein", "correct": false}], "correct_answer": "C. Higher proteins", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Higher proteins Breast milk has high carbohydrate (lactose) content compared to cow’s milk; i.e. 6-7 gm/dl. Fat content is almost equivalent compared to cow’s milk, e. 4 gm/dl. The protein content of breast milk is lower than that in cow’s milk, i.e. about 1 gm/dl. The predominant protein in breast milk is whey protein, while the predominant protein in cow’s milk is casein.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Milk ejection reflex is regulated by which of these hormones?", "options": [{"label": "A", "text": "Vasopressin", "correct": false}, {"label": "B", "text": "Prolactin", "correct": false}, {"label": "C", "text": "Oxytocin", "correct": true}, {"label": "D", "text": "Progesterone", "correct": false}], "correct_answer": "C. Oxytocin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Oxytocin The milk secretion reflex is regulated by prolactin, resulting in the stimulation of milk secretion. On the other hand, the milk ejection reflex is controlled by oxytocin, wherein the milk is primarily secreted from the alveolar glands into the lactiferous sinuses.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is a correct statement about foremilk?", "options": [{"label": "A", "text": "High in protein content", "correct": true}, {"label": "B", "text": "Low in sugar content", "correct": false}, {"label": "C", "text": "High in fat content", "correct": false}, {"label": "D", "text": "Low in vitamin content", "correct": false}], "correct_answer": "A. High in protein content", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>High in protein content Milk that is secreted in the initial part of lactation is known as foremilk; while that secreted during the latter part of lactation is known as hind milk . Foremilk is rich in proteins, sugars, minerals, and vitamins; while hind milk is rich in fat content.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A mother expresses concern that due to her hectic professional life, she is not able to breastfeed her baby. She enquires if she can express her breast milk and if the same can be given to her child safely. You suggest that she expressed breast milk when stored at room temperature can be given to the baby if stored not beyond:", "options": [{"label": "A", "text": "2-4 hours", "correct": false}, {"label": "B", "text": "6-8 hours", "correct": true}, {"label": "C", "text": "16 hours", "correct": false}, {"label": "D", "text": "24 hours", "correct": false}], "correct_answer": "B. 6-8 hours", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>6-8 hours Expressed breast milk can be stored at room temperature for up to 6-8 hours; in a refrigerator for up to 24 hours; and in a freezer at 20 o C for up to 3 months.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In most children, temper tantrums subside by the age of:", "options": [{"label": "A", "text": "1-2 years", "correct": false}, {"label": "B", "text": "1.5-3 years", "correct": false}, {"label": "C", "text": "3-6 years", "correct": true}, {"label": "D", "text": "8-10 years", "correct": false}], "correct_answer": "C. 3-6 years", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>3-6 years Temper tantrums are common in children. They improve with advancing age. In most children, they start by of age and subside by 3-6 years of age. 18-36 months</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 20-month-old boy was brought to the emergency with a history of rapid onset of cyanosis after an episode of excessive crying followed by holding his breath in full expiration. A similar episode was witnessed by the mother 2 weeks back, again precipitated by excessive anger and crying in the child. There is no history of seizures in the family. An Electroencephalogram (ECG) performed in the emergency was normal. The child resumed normal activities in the emergency. An Electroencephalogram (EEG)performed later was also normal. What is your next investigation/management approach?", "options": [{"label": "A", "text": "Electroencephalogram(EEG)", "correct": false}, {"label": "B", "text": "Magnetic resonance imaging(MRI) brain", "correct": false}, {"label": "C", "text": "Echocardiogram(ECHO)", "correct": false}, {"label": "D", "text": "Reassurance and education", "correct": true}], "correct_answer": "D. Reassurance and education", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Reassurance and education This is most likely a breath-holding spell in the child.</p>\n<p><strong>Highyeild:</strong></p><p>These are often precipitated by stimuli such as anger, frustration, or fear and result in the child crying vigorously followed by holding their breath in full expiration. They are uncommon before 6 months of age, peak by 2 years of age, and subside by 5 years. A detailed history is important to rule out other more serious disorders which can mimic these symptoms. Treatment is primarily reassurance and education.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 22 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 7 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "1.5 month old female infant was brought to your Primary Health Care PHC with complaints of inadequate weight gain. Also, the mother complained of poor feeding and decreased urine output for two days. Their birth weight was 2.4 kg. current weight is 2.7 kg. On examination, cyanosis over the nails and some dehydration are present. Systemic examination showed there is a diastolic murmur of grade 2. Which of the following indicates heart disease according to nada criteria?", "options": [{"label": "A", "text": "Poor weight gain", "correct": false}, {"label": "B", "text": "Dehydration", "correct": false}, {"label": "C", "text": "Cyanosis over nails", "correct": false}, {"label": "D", "text": "Diastolic murmur of grade 2", "correct": true}], "correct_answer": "D. Diastolic murmur of grade 2", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Diastolic murmur of grade 2 Cyanosis over nails is peripheral cyanosis. Peripheral cyanosis does not imply the presence of heart disease. Peripheral cyanosis results from increased oxygen extraction of blood from the tissues and is seen in fingers and toes but not in mucous membranes. A diastolic murmur always indicates the presence of organic heart disease. NADA criteria for heart diseases in children Major criteria: Systolic heart murmur (≥ Grade 3) Diastolic murmur Cyanosis Heart failure Minor criteria: Systolic murmur (&lt; Grade 3) Abnormal S2 Abnormal ECG Abnormal X-Ray Abnormal BP One major or two minor criteria are necessary.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "1.5 year old male is brought to you by his mother with complaints of cough for 3 days and fever for one day. On inquiry mother also says increased respiratory activity since one day. On examination, RS – b/l crepitations and rhonchi present with mild respiratory distress. CVS – short soft ejection systolic murmur present in the left parasternal area. You diagnose the child with bronchiolitis and explain to the mother the same. However, she tells you she had shown it to another doctor this morning, and he said the child has some heart disease as per auscultation findings. Which point from the above scenario doesn’t fit NADA criteria?", "options": [{"label": "A", "text": "Respiratory distress", "correct": false}, {"label": "B", "text": "Soft short ejection systolic murmur", "correct": false}, {"label": "C", "text": "B/L crepitations", "correct": false}, {"label": "D", "text": "All of the Above", "correct": true}], "correct_answer": "D. All of the Above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the Above NADA criteria for heart diseases in children Major criteria: Systolic heart murmur (≥ Grade 3) Diastolic murmur Cyanosis Heart failure Minor criteria: Systolic murmur (&lt; Grade 3) Abnormal S2 Abnormal ECG Abnormal Chest X-Ray Abnormal BP One significant or two minor criteria necessary Soft systolic murmur is &lt; grade 3 murmur.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-month-old infant brought to you with a history of recurrent respiratory tract infections. There is a history of poor weight gain. Their birth weight was 2.8 kg; their weight was 4.1 kg. Birth history is uneventful. On examination, a Loud 2nd heart sound is heard. Grade 2 systolic murmur is present. Hepatomegaly is present on P/A examination. Which of the following indicates the presence of heart disease according to NADA criteria?", "options": [{"label": "A", "text": "Recurrent Respiratory tract infections + poor weight gain", "correct": false}, {"label": "B", "text": "Loud 2nd heart sound + grade 2 systolic murmur", "correct": true}, {"label": "C", "text": "Grade 2 systolic murmur + hepatomegaly", "correct": false}, {"label": "D", "text": "None of the above", "correct": false}], "correct_answer": "B. Loud 2nd heart sound + grade 2 systolic murmur", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Loud 2nd heart sound + grade 2 systolic murmur NADA criteria for heart diseases in children Major criteria: Systolic heart murmur (≥ Grade 3) Diastolic murmur Cyanosis Heart failure Minor criteria: Systolic murmur (&lt; Grade 3) Abnormal S2 Abnormal ECG Abnormal Chest X-ray Abnormal BP One primary or two minor criteria are necessary Soft systolic murmur is &lt; grade 3 murmur.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old child presents with recurrent vomiting. You take the BP of the child in the right upper limb, suggesting hypertension. Otherwise CVS examination is within normal limits. Which of the following is not a minor criteria in NADA ?", "options": [{"label": "A", "text": "Abnormal BP", "correct": false}, {"label": "B", "text": "Abnormal ECG", "correct": false}, {"label": "C", "text": "Abnormal S1", "correct": true}, {"label": "D", "text": "Abnormal Chest XR", "correct": false}], "correct_answer": "C. Abnormal S1", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Abnormal S1 Abnormal S2 is a minor criterion in NADA. Major criteria: Systolic heart murmur (≥ Grade 3) Diastolic murmur Cyanosis Heart failure Minor criteria: Systolic murmur (&lt; Grade 3) Abnormal S2 Abnormal ECG Abnormal Chest X-ray Abnormal BP One major or two minor criteria are necessary Soft systolic murmur is &lt; grade 3 murmur.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "NADA’S criteria are used to suspect the presence or absence of heart disease. According to these criteria, the following should be fulfilled to classify a child as having Heart disease.", "options": [{"label": "A", "text": "Presence of one minor criterion.", "correct": false}, {"label": "B", "text": "Presence of one minor and one primary criteria", "correct": false}, {"label": "C", "text": "Presence of one primary and two minor criteria", "correct": false}, {"label": "D", "text": "Presence of one primary or two minor criteria.", "correct": true}], "correct_answer": "D. Presence of one primary or two minor criteria.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Presence of one primary or two minor criteria. NADAs Criteria can be used to assess the presence of or absence of heart disease. MAJOR CRITERIA Minor criteria SYSTOLIC MURMUR Grade 3 OR MORE systolic Murmur less than 3 grade Any diastolic Murmur. Abnormal S2 Cyanosis. Abnormal ECG Congestive heart failure Abnormal chest x-ray Abnormal Blood pressure Presence of one major or two minor criteria is essential for indicating the presence of heart disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "NADA’S criteria are used to suspect the presence or absence of heart disease. According to these criteria, the following are classified as a minor criteria?", "options": [{"label": "A", "text": "SYSTOLIC MURMUR Grade 3 OR MORE", "correct": false}, {"label": "B", "text": "Congestive heart failure.", "correct": false}, {"label": "C", "text": "Cyanosis.", "correct": false}, {"label": "D", "text": "Abnormal BP", "correct": true}], "correct_answer": "D. Abnormal BP", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Abnormal BP NADAs Criteria can be used to assess the presence or absence of heart disease. The presence of one primary or two minor criteria is essential for indicating the presence of heart disease. MAJOR CRITERIA Minor criteria SYSTOLIC MURMUR Grade 3 OR MORE systolic Murmur less than 3 grade Any diastolic Murmur. . Abnormal S2 Cyanosis. Abnormal ECG Congestive heart failure Abnormal chest x-ray Abnormal Blood pressure</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "NADA’S criteria are used to suspect the presence or absence of heart disease. The following given below include all minor measures of NADA’S standards. EXCEPT for", "options": [{"label": "A", "text": "Abnormal S2", "correct": false}, {"label": "B", "text": "Abnormal ECG", "correct": false}, {"label": "C", "text": "Systolic Murmur of less than grade 3", "correct": false}, {"label": "D", "text": "Systolic Murmur of more than grade 3", "correct": true}], "correct_answer": "D. Systolic Murmur of more than grade 3", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Systolic Murmur of more than grade 3 NADAs Criteria can be used to assess the presence or absence of heart disease. The presence of one primary or two minor criteria is essential for indicating the presence of heart disease MAJOR CRITERIA Minor criteria SYSTOLIC MURMUR Grade 3 OR MORE systolic Murmur less than 3 grade Any diastolic Murmur Abnormal S2 Cyanosis. Abnormal ECG Congestive heart failure Abnormal chest x-ray Abnormal Blood pressure</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 17 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 16 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "All of the following are indicative of physiological jaundice in neonates except:", "options": [{"label": "A", "text": "Jaundice appears between 24-72 hours of age", "correct": false}, {"label": "B", "text": "Peaks by 3rd day in a term baby", "correct": false}, {"label": "C", "text": "Serum bilirubin will be &gt; 15mg/dl", "correct": true}, {"label": "D", "text": "Normalizes before 14 days", "correct": false}], "correct_answer": "C. Serum bilirubin will be > 15mg/dl", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Serum bilirubin will be &gt; 15mg/dl PHYSIOLOGICAL JAUNDICE CRITERIA: Appears between 24-72 hours ( never in 1st 24 hours) Peaks by D3in term and D3-7 in preterms and then declines Serum bilirubin &lt; 15 mg/dl</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is/are criteria for pathological jaundice?", "options": [{"label": "A", "text": "Jaundice persisting beyond 2 weeks", "correct": false}, {"label": "B", "text": "Clinical Rise in serum bilirubin &gt; 5 mg/dl per day", "correct": false}, {"label": "C", "text": "Direct bilirubin &gt; 2 mg/dl", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above CRITERIA FOR PATHOLOGICAL JAUNDICE ARE: Clinical jaundice within 24 hours or persisting more than 2 weeks TSB &gt; 15mg/dl bilirubin rises &gt; 5mg/dl/day Direct bilirubin &gt; 2mg/dl at any time/clay-coloured stools</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following causes breastmilk jaundice?", "options": [{"label": "A", "text": "3 alpha 20 beta pregnanediol in breast milk", "correct": true}, {"label": "B", "text": "Due to inadequate feeding", "correct": false}, {"label": "C", "text": "Due to the reduced activity of glucuronyl transferase", "correct": false}, {"label": "D", "text": "None of the above", "correct": false}], "correct_answer": "A. 3 alpha 20 beta pregnanediol in breast milk", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>3 alpha 20 beta pregnanediol in breast milk BREAST MILK JAUNDICE: Breast milk jaundice occurs in some babies because of the presence of 3 alpha 20 beta pregnanediol in breast milk, which inhibits bilirubin conjugation. Breastfeeding should not be stopped for these babies either for diagnosis or treatment. Mothers should be advised to continue breastmilk and frequently monitor serum bilirubin levels, which will decline gradually. BREASTFEEDING JAUNDICE: This occurs in exclusively breastfed babies in their 2nd or 3rd week of life. This is not related to any breastmilk contents and it is due to inadequate feeding . Less milk causes sluggish GI motility and the bilirubin gets deconjugated by beta-glucuronidase . Ensuring optimum breastfeeding would help decrease this kind of breastfeeding.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15 days old term baby was brought by the mother for follow-up. On examination, the baby was looking icteric up to legs, and afebrile, vitals were stable, and systemic examination was normal. Current Weight- 2.4 kgs and on further questioning the baby's birth weight was 2.7 kgs, the baby's blood group is O positive and the mother's blood group is B positive. Baby is passing urine 4-5 times per day and the stool colour is yellow. A mother breastfeeds the baby for only 4 hours once or only when the baby cries. Total bilirubin was 14.9 mg/dl and direct bilirubin was 1.6 mg/dl. What could be the probable cause for jaundice in this baby?", "options": [{"label": "A", "text": "Breastmilk jaundice", "correct": false}, {"label": "B", "text": "Breastfeeding jaundice", "correct": true}, {"label": "C", "text": "Biliary atresia", "correct": false}, {"label": "D", "text": "ABO incompatibility", "correct": false}], "correct_answer": "B. Breastfeeding jaundice", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Breastfeeding jaundice BREASTFEEDING JAUNDICE : This occurs in exclusively breastfed babies in their 2nd and 3rd weeks of life. This is not related to any breastmilk contents and it is due to inadequate feeding. Less milk causes sluggish GI motility and the bilirubin gets deconjugated by beta-glucuronidase. Ensuring optimum breastfeeding would help decrease this kind of breastfeeding. BREAST MILK JAUNDICE: Breast milk jaundice occurs in some babies because of the presence of 3 alpha 20 beta pregnanediol in breast milk, which inhibits bilirubin conjugation. Breastfeeding should not be stopped for these babies either for diagnosis or treatment. Mothers should be advised to continue breastmilk and frequently monitor serum bilirubin levels, which will decline gradually. It is not biliary atresia because stool colour will be pale/clay coloured in biliary atresia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is the most common cause of jaundice appearing within 24 hours?", "options": [{"label": "A", "text": "Cephalhematoma", "correct": false}, {"label": "B", "text": "Biliary atresia", "correct": false}, {"label": "C", "text": "ABO incompatibility", "correct": true}, {"label": "D", "text": "Inborn errors of metabolism", "correct": false}], "correct_answer": "C. ABO incompatibility", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>ABO incompatibility Jaundice Appearing within 24 hours of age: Hemolytic diseases of newborn – Rh, ABO and minor group incompatibility. Infections- intrauterine viral, bacterial, malaria, G6PD deficiency. Jaundice appearing between 24 and 72 hours of life: Physiological Sepsis Polycythemia Concealed hemorrhages like – cephalhematoma, IVH, subarachnoid bleed Increased enterohepatic circulation Jaundice appears after 72 hours Sepsis Neonatal hepatitis Extrahepatic biliary atresia Breast milk jaundice Metabolic disorders.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is the best method to assess jaundice in neonates?", "options": [{"label": "A", "text": "Transcutaneous bilirubinometer", "correct": false}, {"label": "B", "text": "Kramer’s rule", "correct": false}, {"label": "C", "text": "Total serum bilirubin and direct bilirubin estimation", "correct": true}, {"label": "D", "text": "Urine and stool colour", "correct": false}], "correct_answer": "C. Total serum bilirubin and direct bilirubin estimation", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Total serum bilirubin and direct bilirubin estimation Serum bilirubin estimation is the best method to assess jaundice. All babies suspected pathological levels either clinically or with transcutaneous measurements need confirmation by blood tests.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following hereditary diseases causes indirect hyperbilirubinemia in a neonate?", "options": [{"label": "A", "text": "Rotor syndrome", "correct": false}, {"label": "B", "text": "Gilbert’s syndrome", "correct": true}, {"label": "C", "text": "Dubin Johnson syndrome", "correct": false}, {"label": "D", "text": "None of the above", "correct": false}], "correct_answer": "B. Gilbert’s syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Gilbert’s syndrome Hereditary diseases that cause indirect hyperbilirubinemia are: Gilbert’s syndrome and Crigler-Najjar syndrome Hereditary diseases that cause conjugated hyperbilirubinemia are Rotor syndrome and Dubin-Johnson</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which part of the brain is affected by kernicterus?", "options": [{"label": "A", "text": "Cerebellum", "correct": false}, {"label": "B", "text": "Basal ganglia and brainstem nuclei", "correct": true}, {"label": "C", "text": "Cerebral hemisphere", "correct": false}, {"label": "D", "text": "Medial lemniscus", "correct": false}], "correct_answer": "B. Basal ganglia and brainstem nuclei", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Basal ganglia and brainstem nuclei Kernicterus or bilirubin encephalopathy is a neurological syndrome resulting from the deposition of unconjugated bilirubin in the basal ganglia and brainstem nuclei. Initial symptoms- lethargy, poor feeding, loss of Moro’s reflex. Followed by diminished Deep tendon reflex DTR and respiratory distress, the child is gravely ill and prostrate Opisthotonus with bulging fontanel, twitching of the face or limbs and a shrill, high-pitched cry may follow.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5 days old term baby was looking icteric up to palms and soles during a routine examination. The total serum bilirubin done was 18mg/dl and the direct fraction was 1 mg/dl. The child was started on single-surface phototherapy with eyes and genitals closed. What should be the ideal distance between the phototherapy light and the baby?", "options": [{"label": "A", "text": "10-15 cm", "correct": false}, {"label": "B", "text": "15-20 cm", "correct": false}, {"label": "C", "text": "20-25cm", "correct": false}, {"label": "D", "text": "30-45cm", "correct": true}], "correct_answer": "D. 30-45cm", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>30-45cm Administering phototherapy: The distance between light and baby should be 30-45 cm. All clothes should be removed except the diaper and the baby’s eyes closed. The ambient room temperature should be maintained between 25-28oC to prevent hypothermia or hyperthermia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following mechanisms of Phototherapy reduces the total serum bilirubin effectively?", "options": [{"label": "A", "text": "Structural isomerization", "correct": true}, {"label": "B", "text": "Photooxidation", "correct": false}, {"label": "C", "text": "Configurational isomerization", "correct": false}, {"label": "D", "text": "All of the above", "correct": false}], "correct_answer": "A. Structural isomerization", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Structural isomerization This is an irreversible reaction where the bilirubin is converted into Lumirubin. The reaction is directly proportional to the dose of phototherapy.</p>\n<p><strong>Highyeild:</strong></p><p>This product forms 2-6% of TSB which is rapidly excreted from the body and thus is mainly responsible for the phototherapy-induced decline in TSB Total Serum Bilirubin. Configurational isomerization: Here the Z-isomers of bilirubin are converted into E-isomers. The reaction is instantaneous upon exposure to light but reversible as bilirubin reaches the bile duct. Since this is excreted slowly from the body, this is not a major mechanism for a decrease in TSB. Photo oxidation: This is a minor reaction, where photo products are excreted in the urine.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the minimum level of irradiance that should be maintained to maximize the efficacy of phototherapy?", "options": [{"label": "A", "text": "45 microW/cm2/nm", "correct": false}, {"label": "B", "text": "30 microW/cm2/nm", "correct": true}, {"label": "C", "text": "25 microWoW/cm2/nm", "correct": false}, {"label": "D", "text": "35 microW/cm2/nm", "correct": false}], "correct_answer": "B. 30 microW/cm2/nm", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>30 microW/cm2/nm The irradiance of phototherapy lights should be periodically measured and a minimum level of 30 microW/cm2 /nm in the wavelength range of 460 to 490 nm must be ensured. The lamps should be changed, if the lamps are flickering or ends are blackened, if irradiance falls below the specified level.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are side effects of phototherapy except:", "options": [{"label": "A", "text": "Grey baby syndrome", "correct": true}, {"label": "B", "text": "Hypothermia", "correct": false}, {"label": "C", "text": "Hypocalcemia", "correct": false}, {"label": "D", "text": "Loose stools", "correct": false}], "correct_answer": "A. Grey baby syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Grey baby syndrome Complications associated with phototherapy include: Loose stools, erythematous macular rash, purpuric rash associated with transient porphyrinuria, overheating, dehydration, hypothermia and bronze baby syndrome. The bronze baby syndrome is the dark greyish-brown discolouration of skin in a baby having direct hyperbilirubinemia. The grey baby syndrome occurs in chloramphenicol toxicity.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3 days old term baby born to a B-negative mother has a serum total bilirubin of 29 mg/dl. Baby’s blood group is B positive and Direct Coombs Test (DCT) is strongly positive. This baby received intensive phototherapy for 12 hours but the serum bilirubin is rising so an exchange transfusion was planned. What is the volume of blood used in double-volume exchange transfusion?", "options": [{"label": "A", "text": "80 ml/kg", "correct": false}, {"label": "B", "text": "100ml/kg", "correct": false}, {"label": "C", "text": "160 ml/kg", "correct": true}, {"label": "D", "text": "200ml/kg", "correct": false}], "correct_answer": "C. 160 ml/kg", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>160 ml/kg Single volume exchange transfusion- 80ml/kg Double volume exchange transfusion- 160 ml/kg. Double volume exchange transfusion is performed if intensive phototherapy has failed to reduce bilirubin levels to a safe range and the risk of kernicterus exceeds the procedural risk.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is an indication for double volume exchange transfusion at birth for infants with Rh isoimmunization?", "options": [{"label": "A", "text": "Cord Hb 15 mg/dl or less", "correct": false}, {"label": "B", "text": "Cord bilirubin 10mg/dl or more", "correct": false}, {"label": "C", "text": "Cord Hb 10 mg/dl or more", "correct": false}, {"label": "D", "text": "Cord bilirubin 5mg/dl or more", "correct": true}], "correct_answer": "D. Cord bilirubin 5mg/dl or more", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Cord bilirubin 5mg/dl or more Indications for Double volume exchange transfusion( DVET) at birth in infants with Rh isoimmunization include: Cord bilirubin is 5 mg/ dL or more Cord Hb is 10 g/dL or less</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The stimulus for the first breath in a newborn is all of the following:", "options": [{"label": "A", "text": "Hypoxia", "correct": false}, {"label": "B", "text": "Hypercarbia", "correct": false}, {"label": "C", "text": "Acidosis", "correct": false}, {"label": "D", "text": "Hypocarbia", "correct": true}], "correct_answer": "D. Hypocarbia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hypocarbia The stimulus for first birth in a newborn is hypoxia, hypercarbia and acidosis. Not hypocarbia. When the placental circulation stops the fetus receives an insufficient supply of oxygen (hypoxia) to support normal cellular functions and CO2 cannot be removed (hypercarbia). The blood acid levels increase as cells attempt to function without oxygen and CO2 accumulates (acidosis).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The efficacy of phototherapy is affected by all of the following:", "options": [{"label": "A", "text": "Type of light", "correct": false}, {"label": "B", "text": "Irradiance dose", "correct": false}, {"label": "C", "text": "Wavelength", "correct": false}, {"label": "D", "text": "Starting earlier, prophylactically", "correct": true}], "correct_answer": "D. Starting earlier, prophylactically", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Starting earlier, prophylactically To maximize the phototherapy effect: The irradiance of phototherapy lights should be periodically measured and a minimum level of 30 microW/cm2 /nm The wavelength range of 460 to 490 nm must be ensured. Light emitting diodes (LED) has the advantage of long life (up to 50,000 hours) and is capable of delivering higher irradiance than Compact fluorescent lamp (CFL) lamps The lamps should be changed, if the lamps are flickering or ends are blackened, if irradiance falls below the specified level. For phototherapy to be effective bilirubin must be present in the skin, so no role in prophylactic phototherapy.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 26 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 13 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A neonate born through C-section was brought directly from the gynae O.T. to the paediatric Neonatal intensive care unit(NICU) for no respiratory efforts or no cry immediately after birth. Neonatal resuscitation was started, still, the baby was apneic with a heart rate of 78/min at 1 min after birth. Spo2 levels were low to normal observed in this neonate. What should be the target spo2 levels at 5min of birth?", "options": [{"label": "A", "text": "70 to 75%", "correct": false}, {"label": "B", "text": "75 to 80%", "correct": false}, {"label": "C", "text": "80 to 85%", "correct": true}, {"label": "D", "text": "85 to 90%", "correct": false}], "correct_answer": "C. 80 to 85%", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>80 to 85% One should ask 3 questions at the time of birth of a neonate. Term gestation? Breathing/crying? Good muscle tone? Components of neonatal resuscitation includes T A B C(Temperature- airway – breathing- circulation ) After the initial steps of resuscitation: If the baby has good breathing, HR 100/min or more, and no cyanosis, then no additional intervention is needed</p>\n<p><strong>Highyeild:</strong></p><p>If the baby has laboured breathing/ persistent central cyanosis, administration of Continuous positive air pressure (CPAP) in preterm babies and supplemental oxygen in term babies is recommended. Baby should have its O2 saturation monitored and supplemental O2 is titrated to achieve targeted saturation as given below in the table. Target preductal spo2 after birth : 1min = 60 to 65% 2min = 65 to 70% 3min = 70 to 75% 4min = 75 to 80% 5min = 80 to 85% 10min = 85 to 90% If the baby is apneic and has gasping breathing or HR &lt; 100/min then positive pressure ventilation is needed.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You are on your daily ward rounds. Your professor asked you to arrange the developmental milestones attained by an 18-month-old child and correct the sequence accordingly. 1. Sitting without support 2. Cruising 3. Transferring object from one hand to another 4. Scribbling 5. 8 to 10 meaning full words Select the correct answer from the given below code:", "options": [{"label": "A", "text": "1 - 2- 3- 4- 5", "correct": false}, {"label": "B", "text": "4-3-5-2-1", "correct": false}, {"label": "C", "text": "3-1-2-4-5", "correct": true}, {"label": "D", "text": "2-1-5-4-3", "correct": false}], "correct_answer": "C. 3-1-2-4-5", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>3-1-2-4-5 Transferring object from hand to hand at 6 months Sitting without support (crawling) by 8 months Cruising at 11 months Scribbling at 15 months Speaks 8 to 10 meaningful words by 18 months Age Milestone 3 months Neck holding 5 months Rolls over 6 months Sits in tripod fashion (sitting with own support) 8 months Sitting without support 9 months Stands holding on (with support) 12 months Creeps wel walks but falls; stands without support 15 months Walks alone; creeps upstairs 18 months Runs; explores drawers 2 years Walks up and downstairs (2 feet/step); jumps 3 years Rides tricycle; alternate feet going upstairs 4 years Hops on one foot alternate feet going downstars Age Milestone 2 months Social smile (smile after being talked to) 3 months Recognizes mother; anticipates feeds 6 months Recognizes strangers, stranger anxiety 9 months Waves \"bye bye\" 12 months Comes when called; plays simple ball game 15 months Jargon 18 months Copies parents in task (e.g. sweeping) 2 years Asks for food, drink, toilet; pulls people to show toys 3 years Shares toys; knows full name and gender 4 years Plays cooperatively in a group; goes to toilet alone 5 years Helps in household tasks, dresses and undresses Age Milestone 4 months Bidextrous reach (reaching out for objects with both hands) 6 months Unidextrous reach (reaching out for objects with one hand); transfers objects 9 months Immature pincer grasp; probes with forefinger 12 months Pincer grasp mature 15 months Imitates scribbling; tower of 2 blocks 18 months Scribbles; tower of 3 blocks 2 years Tower of 6 blocks; vertical and circular stroke 3 years Tower of 9 blocks; copies circle 4 years Copies cross; bridge with blocks 5 years Copies triangle; gate with blocks</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A mother brought her 3 years old child to the paediatrician as she was worried about the development of her child. The mother informs that her child, after coming from school, doesn’t help himself undress and he is confused about how to open the door and still cannot make a standing line. According to you, these milestones should be achieved at what age?", "options": [{"label": "A", "text": "24 months", "correct": true}, {"label": "B", "text": "30 months", "correct": false}, {"label": "C", "text": "36 months", "correct": false}, {"label": "D", "text": "48 months", "correct": false}], "correct_answer": "A. 24 months", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>24 months Motor milestones achieved are: running well, walking up and down stairs, 1 step at a time, opening doors, climbing on furniture and jumps Adaptive milestones: make a tower of cubes (6 at 21 months), scribble in a circular pattern, imitate horizontal strokes, and fold the paper once imitatively Language milestones: put 3 words together (subject, verb, object) Social milestone: handles spoon well, often tells about immediate experiences, helps to undress, listens to stories when shown pictures Developmental Milestones Age Gross Motor Fine Motor- Adaptive Personal-Social Language Other Cognitive 2 wk Moves head side to side Regards face Alerts to bell 2 mo Lifts shoulder while prone Tracks past midline Smiles responsively Cooing Searches for sound with eyes 4 mo Lifts up on hands Reaches for object Looks at hand Laughs and squeals Rolls front to back Raking grasp Begins to work toward toy If pulled to sit from supine, no head lag 6 mo Sits alone Transfers object hand to hand Feeds self Babbles Holds bottle 9 mo Pulls to stand Starting to pincer grasp Waves bye-bye Says Dada and Mama, but nonspecific Gets into sitting position Bangs 2 blocks together Plays pat-a-cake 2-syllable sounds 12 mo Walks Puts block in Drinks from a cup Says Mama and cup Dada, specific Stoops and stands Imitates others Says 1-2 other words 15 mo Walks backward Scribbles Uses spoon and fork Says 3-6 words Stacks 2 blocks Helps in housework Follows commands 18 mo Runs Stacks four blocks Removes garment Says at least 6 words Kicks a ball \"Feeds\" doll 2 yr Walks up and down stairs Stacks 6 blocks Washes and dries hands Puts 2 words together Understands concept of \"Today Throws overhand Copies line Brushes teeth Points to pictures Puts on clothes Knows body parts 3 yr Walks steps alternating feet Stacks 8 blocks Uses spoon well spilling little Names pictures Understands concepts of tomorrow\" and \"yesterday\" Broad jump Wiggles thumb Puts on t-shirt Speech understandable to stranger 75% Says 3-word sentences 4 yr Balances well on each foot Copies O, maybe + Brushes teeth without help Names colors Hops on one foot Draws person with 3 parts Dresses without help Understands adjectives 5 yr Skips Copies Counts Heal-to-toe walks Understands opposites 6yr Balances on each foot 6 sec Copies A Defines words Begins to understand \"right\" and \"left\" Draws person with 6 parts</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the suction pressure to be used during neonatal resuscitation?", "options": [{"label": "A", "text": "50-60 mmHg", "correct": false}, {"label": "B", "text": "60-80 mmHg", "correct": false}, {"label": "C", "text": "80-100mmHg", "correct": true}, {"label": "D", "text": "100-150mmHg", "correct": false}], "correct_answer": "C. 80-100mmHg", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>80-100mmHg For suctioning, the size of the suction catheter should be 12 or 14 Fr.</p>\n<p><strong>Highyeild:</strong></p><p>The suction pressure should be kept around 80 mm Hg (100 cm H20) and should not exceed 100 mm Hg (130 cm H20). One should not insert the catheter too deep in the mouth (only 5 cm) or nose (only 3cm) for suction as it may stimulate the posterior pharynx producing a vagal response resulting in bradycardia or apnea.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are true about primary apnea in a neonate except", "options": [{"label": "A", "text": "Heart Rate (HR) falls below 100", "correct": false}, {"label": "B", "text": "The baby may not respond to tactile stimulation", "correct": true}, {"label": "C", "text": "Blood pressure remains normal", "correct": false}, {"label": "D", "text": "Baby will not cry at birth", "correct": false}], "correct_answer": "B. The baby may not respond to tactile stimulation", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>The baby may not respond to tactile stimulation Primary apnea- When the infant is deprived of oxygen, an initial brief period of rapid breathing occurs. If asphyxia continues, respiratory movements cease and the baby enters into primary apnea. In primary apnea, HR will fall and neuromuscular tone is low but the BP remains normal The baby starts to breathe /cry after tactile stimulation if the child is in a state of primary apnea Secondary apnea. If the asphyxia continues, the infant develops deep gasping respiration, HR continues to reduce, the blood pressure continues to fall and the infant becomes flaccid. The breathing becomes weaker until the infant gasps. Now unresponsive to stimulation and needs positive pressure ventilation (PPV) to stimulate breathing. Both primary and secondary apnea can be present at birth.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the usual initial pressure required when using predictive value Positive (PPV) for the first breath?", "options": [{"label": "A", "text": "20 cm H2O", "correct": false}, {"label": "B", "text": "30 cm H20", "correct": true}, {"label": "C", "text": "50cm H2O", "correct": false}, {"label": "D", "text": "15cm H2O", "correct": false}], "correct_answer": "B. 30 cm H20", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>30 cm H20 When using the predictive value Positive (PPV), the usual initial pressure required for the first breath is 30-40 cmH2O. For subsequent breaths, a pressure of 15-20 cm H2O is adequate. The resuscitation bag should have a capacity of 240 to 750 mL .</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which is the single most effective step in the resuscitation of babies who fail to breathe at birth?", "options": [{"label": "A", "text": "Suctioning", "correct": false}, {"label": "B", "text": "Tactile stimulation", "correct": false}, {"label": "C", "text": "Positive pressure ventilation", "correct": true}, {"label": "D", "text": "Chest compressions", "correct": false}], "correct_answer": "C. Positive pressure ventilation", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Positive pressure ventilation Positive Pressure Ventilation with self-inflating bags and face mask is the single most effective step in the resuscitation of neonates who fail to breathe at birth. The resuscitation bag should have a capacity of 240 to 750 mL. Observe for an appropriate rise of the chest and auscultate for breath sounds. If chest rise is not there and there are no audible breath sounds, then ventilation corrective steps should be taken.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are indications of bag and mask ventilation except?", "options": [{"label": "A", "text": "HR &lt; 100", "correct": false}, {"label": "B", "text": "Apneic Gasping", "correct": false}, {"label": "C", "text": "HR &lt; 60", "correct": true}, {"label": "D", "text": "Labored breathing", "correct": false}], "correct_answer": "C. HR < 60", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>HR &lt; 60 Bag and Mask Ventilation is indicated, if: The infant is apneic or gasping HR is less than 100 beats per minute In laboured breathing, treatment is supplemental oxygen, if a term baby or Continuous positive airway pressure (CPAP) in a preterm baby.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 34-week preterm baby was born by normal vaginal delivery and did not cry at birth. The child did not improve with initial resuscitative efforts. HR was still &lt; 100 and so the child was started on Positive pressure ventilation. What is the recommended oxygen concentration used with Positive predictive Ventilation (PPV) in this baby?", "options": [{"label": "A", "text": "Room air", "correct": false}, {"label": "B", "text": "80-100%", "correct": false}, {"label": "C", "text": "50- 60%", "correct": false}, {"label": "D", "text": "21-30%", "correct": true}], "correct_answer": "D. 21-30%", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>21-30% Oxygen should be treated as a drug. Both too little and too much oxygen is bad for the baby.</p>\n<p><strong>Highyeild:</strong></p><p>It is recommended that term babies should be started on room air resuscitation and oxygen saturation to be monitored by pulse oximetry . Oxygen delivery should be titrated to maintain oxygen saturation in the targeted range. For preterm babies (&lt; 35 weeks), PPV with 21-30% oxygen is recommended.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term baby was born by normal vaginal delivery, did not cry at birth and HR is &lt; 100/min, suction and stimulation were given and started on PPV with a bag and mask ventilation. After 30 sec of effective PPV, the child did not improve and HR was &lt; 60/min. So, chest compressions were initiated with a thumb-encircling method. How long should you continue chest compressions before assessing the Heart rate?", "options": [{"label": "A", "text": "30 sec", "correct": false}, {"label": "B", "text": "1 min", "correct": true}, {"label": "C", "text": "2 min", "correct": false}, {"label": "D", "text": "15 sec", "correct": false}], "correct_answer": "B. 1 min", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1 min Chest compressions (CC) consist of rhythmic compressions of the sternum that compress the heart against the spine, increase intrathoracic pressure and circulate blood to the vital organs of the body.</p>\n<p><strong>Highyeild:</strong></p><p>CC helps to mechanically pump blood to vital organs of the body. CC must always be accompanied by Percutaneous balloon mitral valvuloplasty (BMV) so that only oxygenated blood is being circulated during CC. Chest compressions are indicated if HR is below 60/min even after 30 seconds of PPV. Chest compressions are indicated if HR is below 60/min even after 30 seconds of Positive predictive value (PPV). In one minute, 90 chest compressions and 30 breaths are administered (a total of 120 events).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 32-week preterm baby with a birth weight of 1.8 kg is delivered by Normal vaginal delivery. The baby did not cry at birth. Even after giving PPV for 30 sec and chest compressions for 1 minute, the baby did not improve. HR &lt; 60/min and gasping. What size Endotracheal tube will you choose to intubate the baby?", "options": [{"label": "A", "text": "2.5", "correct": false}, {"label": "B", "text": "3", "correct": true}, {"label": "C", "text": "3.5", "correct": false}, {"label": "D", "text": "4", "correct": false}], "correct_answer": "B. 3", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>3 Uncuffed Endotracheal tube (ET) tube should preferably be selected and size should be appropriate depending on birth weight and gestational age &lt; 1 kg- &lt; 28 weeks – 2.5 size 1-2 kgs – 28-34 weeks- 3 size 2-3 kgs- 34-38 weeks- 3.5 size &gt;3 kgs- &gt;38 weeks- 4 size</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following medications are used in neonatal resuscitation except", "options": [{"label": "A", "text": "Adrenaline", "correct": false}, {"label": "B", "text": "Dopamine", "correct": true}, {"label": "C", "text": "Normal saline", "correct": false}, {"label": "D", "text": "Naloxone", "correct": false}], "correct_answer": "B. Dopamine", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Dopamine Dopamine is not indicated in the Neonatal resuscitation program (NRP). Even after chest compression if the HR does not improve, we have to give adrenaline 0.1ml/kg 1 in 10000 dilutions iv or while getting an Umbilical venous catheter (UVC) we can give 0.3 -0.5 ml/kg through Endotracheal tract (ET) tube. Normal saline bolus if the baby looks pale and has a history of blood loss like Antepartum Haemorrhage APH in the mother. Naloxone is indicated only in special circumstances when the mother is taking opioids and you suspect withdrawal effects in neonates.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the dose of adrenaline to be given in neonatal resuscitation?", "options": [{"label": "A", "text": "1ml/kg 1in 1000 dilution iv", "correct": false}, {"label": "B", "text": "1ml/kg 1 in 10000 dilution iv", "correct": false}, {"label": "C", "text": "0.1 ml/kg in 1 in 1000 dilution iv", "correct": false}, {"label": "D", "text": "0.1 ml/kg in 1 in 10000 dilution iv", "correct": true}], "correct_answer": "D. 0.1 ml/kg in 1 in 10000 dilution iv", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>0.1 ml/kg in 1 in 10000 dilution iv Use of adrenaline is indicated if HR remains below 60 despite adequate ventilation and chest compressions for 1 minute.</p>\n<p><strong>Highyeild:</strong></p><p>The dose of epinephrine through iv is 1-0.3 ml/kg in 1 in 10,000 dilutions or 0.01-0.03 mg/kg 1 in 10,000 dilutions. Through ET – 5-1ml/kg 1 in 10000 dilutions or 0.05-0.1 mg/kg 1in 10,000 dilutions.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 23 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 5 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 12-year-old girl was brought to the pediatric OPD by her mother with complaints of moody behavior, emotional lability, anxiety, and personality changes. On doing, lab investigations serum ceruloplasmin levels were found to be less than 20 mg/dl. The most likely diagnosis is?", "options": [{"label": "A", "text": "Alpha-1 antitrypsin deficiency", "correct": false}, {"label": "B", "text": "Wilson's disease", "correct": true}, {"label": "C", "text": "Glycogen storage disease", "correct": false}, {"label": "D", "text": "Indian childhood cirrhosis", "correct": false}], "correct_answer": "B. Wilson's disease", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Wilson's disease Wilson's disease (Hepatolenticular degeneration) is an autosomal recessive disorder found on chromosome 13(13q14.3 ) encodes ATP7B copper transporting P-type ATPase mainly expressed in hepatocytes and is critical for biliary copper excretion and copper incorporation into ceruloplasmin. Absence or malfunction of ATP7B results in decreased biliary copper excretion and diffuse accumulation of copper in the cytosol of hepatocytes. With time being copper is overloaded in hepatocytes and redistributed into the brain and kidneys causing toxicity. Wilson's disease is associated with liver disease, degenerative changes in the brain and Kayser Fleischer rings in the cornea. KF rings are absent in young patients with hepatic Wilson's disease but are present in 95% of patients with neurologic symptoms. The age of presentation can vary from 4 to 60 years. Manifestations are more likely to be hepatic in early childhood and neurological in adolescents or adults. Neurological abnormalities are varied and may present as intention tremors, speech difficulties, rigid dystonia, parkinsonism, scholastic deterioration, behavioral problems, convulsions, and choreiform movements.</p>\n<p><strong>Highyeild:</strong></p><p>Caused due to loss of function mutation in the ATP7B gene on chromosome 13q. A deficiency of ATP7B leads to excess deposition of free copper in the tissues. LAB MARKERS. WILSONS DISEASE INTERPRETATION SR ceruloplasmin. Decreased ATP7B deficiencyresults in decreased bound copper 24 urinary copper. Increased. Excess-free copper excreted in urine Total sr copper. Decreased. Marked reduction in sr ceruloplasmin chelating agents like D-penicillamine is the first-line drug.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old boy has been complaining of headaches, and difficulty seeing objects on the sides for four months. On examination the child is neurologically normal, his grades at school are good, and visual acuity is diminished in both eyes. Visual charting showed significant field defects. CT brain showed a suprasellar mass with calcification. Which of the following is the most probable diagnosis?", "options": [{"label": "A", "text": "Astrocytoma", "correct": false}, {"label": "B", "text": "Craniopharyngioma", "correct": true}, {"label": "C", "text": "Pituitary adenoma", "correct": false}, {"label": "D", "text": "Meningioma", "correct": false}], "correct_answer": "B. Craniopharyngioma", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Craniopharyngioma Craniopharyngioma is a common tumor in childhood. Two histologic subtypes have been identified, adamantinomatous CP and papillary CP, each with a specific origin and genetic alterations.</p>\n<p><strong>Highyeild:</strong></p><p>Children with CP often present with endocrinologic abnormalities ( growth failure and delayed sexual maturation ) and/or visual changes (decreased acuity or visual field abnormalities). These tumors are often large and heterogeneous, displaying both solid and cystic components, and occur within the suprasellar region. They are minimally invasive, adhere to the adjacent brain parenchyma, and engulf normal brain structures. MRI demonstrates the solid tumor with cystic structures containing fluid of intermediate density, and CT may show calcifications. Surgery is the primary treatment modality, with gross total curative resection. Significant morbidity (panhypopituitarism, growth failure, visual loss) is associated with CPs and their therapy because of the anatomic location. There is no role for chemotherapy in CP.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old child presents with seborrheic dermatitis, sinusitis, and chronically draining ears. On examination, a child has failure to thrive, hepatosplenomegaly, and exophthalmos and the findings as shown in the below image, probable diagnosis is?", "options": [{"label": "A", "text": "Histiocytosis x", "correct": true}, {"label": "B", "text": "Wegener's granulomatosis", "correct": false}, {"label": "C", "text": "Hemophagocytic Lymphohistiocytosis", "correct": false}, {"label": "D", "text": "Chediak higashi syndrome", "correct": false}], "correct_answer": "A. Histiocytosis x", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Histiocytosis x Langerhans cells are the tissue-resident macrophages in the epidermis of the skin.</p>\n<p><strong>Highyeild:</strong></p><p>Langerhans cell histiocytosis: mc overall site- BONE( lyric lesion), mc affected bone is the 2nd most common jaw/ mandible: missing tooth or loose tooth SKIN - seborrheic dermatitis/cradle cap. The proliferation of immature cells of the myeloid lineage. The skeleton is involved in 80% of patients and may be the only affected site in children &gt;5yrs. Approximately 50% of patients experience skin involvement at some time during the course of illness. Bone lesions can be single or multiple affecting skull bones( solitary or multiple punched-out lytic lesions) , long bones, vertebrae, mastoid, and mandible. The lesions may be painless or present with pain and local swelling; X-rays show sharp lytic lesions. Clinical manifestation includes vertebral collapse ( vertebra plana ) and spinal compression, pathological fractures in Long bones, chronic draining ears, and early eruption of teeth. Other manifestations include seborrheic skin rash in the scalp area and back, lymphadenopathy, and hepatosplenomegaly. Langerhans cell histiocytosis presents as blueberry muffin rash in neonates. Wegener's granulomatosis - presents with upper respiratory tract infections but it has granuloma and necrosis. Hemophagocytic lymphohistiocytosis -similar presentation most often with fever, maculopapular and or petechial rash, weight loss, and irritability. The initial presentation can vary but is almost very severe and in cases of secondary HLH may be camouflaged by a primary disease process. The acute presentation includes septic shock, acute respiratory distress, seizures, and coma. Physical examination often reveals hepatosplenomegaly, lymphadenopathy, respiratory distress, and jaundice. Chediak higashi syndrome presents with neurological symptoms and infections</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old child with complaints of fever and cough similar to the sound of a barking dog was brought to the pediatrics ward at 2 am. On examination Temp was 101F, heart rate-126 bpm, respiratory rate 46 cycles/min,spo2-92%, with nasal flaring, suprasternal, infrasternal, and intercostal retractions with continuous stridor.No other abnormalities were present, what is the next best step in the management?", "options": [{"label": "A", "text": "Dexamethasone", "correct": true}, {"label": "B", "text": "Racemic epinephrine", "correct": false}, {"label": "C", "text": "Salbutamol", "correct": false}, {"label": "D", "text": "Free flow oxygen", "correct": false}], "correct_answer": "A. Dexamethasone", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Dexamethasone Patients with laryngotracheobronchitis ( croup )should be assessed for severity of illness based on general appearance, stridor (audible with/without stethoscope), oxygen saturation, and respiratory distress. Mild cases can be managed on an ambulatory basis with symptomatic treatment for fever and encouraging the child to take liquids orally.</p>\n<p><strong>Highyeild:</strong></p><p>6 months to 5 years (peak 2 years) Ethology: parainfluenza virus Presents with stridor associated with low-grade fever Barking cough//seal-like brassy cough X-Ray - steeple sign Management- Supportive treatment mainly Mild- oral dexamethasone as single dose(0.15-0.6mg/kg) Mod to severe croup- If hypoxia is present -o2 support with nebulization with racemic adrenaline. Parents are explained about the progression of diseases and to bring the child back to the hospital in case of worsening symptoms. Moderately severe patients require hospitalization and treatment with epinephrine (1:1000 dilution 0.1-0.5 mL/kg in 3 ml NS can be used as often as every 20 min, maximum 5 mL) administered through a nebulizer for immediate relief of symptoms. All patients with severe croup should receive a single dose of dexamethasone (0.3-0.6 mg/kg IM) within the first 24 hours. Inhalation of budesonide, at the dose of 1 mg twice a day for 2 days, has also shown satisfactory results. Severe croup requires urgent hospitalization with oxygen inhalation, therapy with epinephrine and steroids (as above), and occasionally short-term ventilation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 18 months child came with increased work of breathing with a respiratory rate of 50/min. The child was not lethargic but irritable and had stridor. Examination reveals bilateral rhonchi. Spo2 is 88 percent. What is the next best step in management?", "options": [{"label": "A", "text": "Give 02 by mask with a child on the lap of the mother, along with beta-agonist and adrenaline-nebulization", "correct": false}, {"label": "B", "text": "Examine throat, give O2 by mask along with beta-agonist nebulization with one dose of steroid", "correct": true}, {"label": "C", "text": "Immediate intubation and ventilate the child and establish IV/IO access", "correct": false}, {"label": "D", "text": "Urgent referral to a tertiary center", "correct": false}], "correct_answer": "B. Examine throat, give O2 by mask along with beta-agonist nebulization with one dose of steroid", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Examine throat, give O2 by mask along with beta-agonist nebulization with one dose of steroid Patients with laryngotracheobronchitis should be assessed for severity of illness based on general appearance, stridor (audible with/without stethoscope), oxygen saturation, and respiratory distress.</p>\n<p><strong>Highyeild:</strong></p><p>Mild cases can be managed on an ambulatory basis with symptomatic treatment for fever and encouraging the child to take liquids orally. Parents are explained about the progression of diseases and to bring the child back to the hospital in case of worsening symptoms. Moderately severe patients require hospitalization and treatment with epinephrine (1:1000 dilution 0.1-0.5 mL/kg; maximum 5 mL) administered through a nebulizer for immediate relief of symptoms. All patients with severe croup should receive a single dose of dexamethasone (0.3-0.6 mg/kg IM) within the first 24 hours. Inhalation of budesonide, at a dose of 1 mg twice a day for 2 days, has also shown satisfactory results. Severe croup requires urgent hospitalization with oxygen inhalation, therapy with epinephrine and steroids (as above), and occasionally short-term ventilation.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 15 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 9 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 7yr old boy presented with progressive thinning of legs, gait difficulties, frequent twisting of ankles, and foot deformities. On examination, there was distal weakness and peroneal muscle atrophy. What is the most probable diagnosis?", "options": [{"label": "A", "text": "Guillain Barre syndrome", "correct": false}, {"label": "B", "text": "Spinal Muscular Atrophy (SMA)", "correct": false}, {"label": "C", "text": "Charcot Marie tooth disease", "correct": true}, {"label": "D", "text": "Polio", "correct": false}], "correct_answer": "C. Charcot Marie tooth disease", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Charcot Marie tooth disease Charcot Marie Tooth disease is a hereditary neuropathy that presents with distal weakness and peroneal muscle atrophy depicting a classic stork leg appearance. GBS presents as a symmetrical ascending paralysis, not as above. Option A false SMA and polio have different presentations as both are anterior horn cell diseases .</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "On routine examination, a neonate was found to be hypotonic. Tongue fasciculations were also present. Genetic testing revealed a mutation in the SMN1 gene. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Dubowitz disease", "correct": false}, {"label": "B", "text": "Kugelberg-Welander disease", "correct": false}, {"label": "C", "text": "Werdnig-Hoffman disease", "correct": true}, {"label": "D", "text": "Cerebral Palsy", "correct": false}], "correct_answer": "C. Werdnig-Hoffman disease", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Werdnig-Hoffman disease The clinical scenario points towards floppy infant syndrome. Werdnig-Hoffman disease (SMA type 1): Severe progressive hypotonia and weakness from the neonatal period.</p>\n<p><strong>Highyeild:</strong></p><p>Mutation in the SMN1 gene confirms the cause to be spinal muscle atrophy. Spinal Muscle Atrophy is an autosomal recessive disease caused by a mutation in the SMN1 gene on chromosome 5. Survival motor neuron (SMN) inhibits programmed cell death/apoptosis of motor neurons. SMA can be differentiated from muscular dystrophies by tongue fasciculations, absence of cardiac involvement, and presence of average IQ.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option D. Usually, there is spasticity in CP. Option A. Dubowitz disease (SMA type 2): Progressive hypotonia and weakness in late infancy. Option B. Kugelberg-Welander disease (SMA type 3) is the mildest form of SMA and presents progressive proximal muscle weakness with juvenile onset. Note: Muscle hypertrophy is seen here, unlike atrophy in another type of SMA.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-month-old infant is brought to the clinic complaining of decreased body movements. On examination, tongue fasciculations are present and auscultatory findings are normal. Developmental milestones are achieved normally according to age. On lifting the baby, the following finding is seen: After further investigations, a diagnosis of spinal muscle atrophy was made. Which of the following is true about the diagnosis?", "options": [{"label": "A", "text": "Mutated gene present on chromosome 6", "correct": false}, {"label": "B", "text": "It is a disorder of anterior horn cells", "correct": true}, {"label": "C", "text": "Facial muscles are involved", "correct": false}, {"label": "D", "text": "Enzyme replacement therapy is available", "correct": false}], "correct_answer": "B. It is a disorder of anterior horn cells", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884603991-QTDK049004IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>It is a disorder of anterior horn cells Spinal Muscle Atrophy is an autosomal recessive disease caused by the degeneration of anterior horn cells .</p>\n<p><strong>Highyeild:</strong></p><p>SMA can be differentiated from muscular dystrophies by tongue fasciculations , absence of cardiac involvemen t, and presence of normal IQ.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. SMN1 gene mutated in SMA is present on chromosome 5 . Survival motor neuron (SMN) inhibits programmed cell death/apoptosis of motor neurons . Option C. Facial muscles such as eye muscles are spared in SMA, unlike in neuromuscular junction disorder . Option D. In SMA, there is no end deficiency. So, enzyme replacement therapy has no role.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year-old boy is brought to the clinic with complaints of weakness. On examination, hypotonia is seen in the trunk, and all four limbs and tongue fasciculations are present. Genetic testing showed a mutation of the SMN1 gene at chromosome 5. Which of the following can be used for treating the condition?", "options": [{"label": "A", "text": "Intravenous immunoglobulin", "correct": false}, {"label": "B", "text": "Low dose Prednisolone", "correct": false}, {"label": "C", "text": "Nusinersen", "correct": true}, {"label": "D", "text": "Pyridostigmine", "correct": false}], "correct_answer": "C. Nusinersen", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nusinersen Nusinersen (marketed as Spinraza) is an antisense oligonucleotide and is the first disease-modifying therapy approved for SMA .</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. IVIG treats autoimmune diseases such as Guillain-Barre syndrome and Myasthenia Gravis . Option B. Corticosteroids are used in i nflammatory or autoimmune conditions . Option D. Cholinesterase inhibitors like pyridostigmine are the initial treatment for myasthenia gravis commonly used at 1-7 mg/kg/day in 4 divided doses.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 14-year-old boy presents to the clinic complaining of weakness in both lower limbs. He recently had episodes of diarrhea one month back. On examination, deep tendon reflexes are absent in both the lower limbs. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Myasthenia Gravis", "correct": false}, {"label": "B", "text": "Botulism", "correct": false}, {"label": "C", "text": "Poliomyelitis", "correct": false}, {"label": "D", "text": "Guillain- Barre Syndrome", "correct": true}], "correct_answer": "D. Guillain- Barre Syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Guillain- Barre Syndrome The clinical scenario points toward a diagnosis of acute flaccid paralysis.</p>\n<p><strong>Highyeild:</strong></p><p>It is a clinical syndrome characterized by rapid onset of weakness, progressing to maximum severity within several days to weeks. Guillain- Barre Syndrome is the most common cause of acute flaccid paralysis in children with a prodromal respiratory or gastrointestinal infection. Features in the question suggesting Guillain- Barre Syndrome are: symmetrical, starting from lower limbs, and prodromal gastrointestinal symptoms present.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Myasthenia Gravis mainly presents with initial symptoms of ptosis and ophthalmoplegia, progressing slowly and not acutely. Option B. Botulism also presents with acute flaccid paralysis, usually in descending form. Early symptoms include blurred vision and difficulty speaking and swallowing. Option C. Poliomyelitis presents with asymmetric acute flaccid paralysis and may be associated with fever.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 16-year-old girl presents to the clinic with drooping eyelids, diplopia on looking up, and easy fatigability after doing less than usual daily activities. The chest X-ray is shown below. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Myasthenia Gravis", "correct": true}, {"label": "B", "text": "Botulism", "correct": false}, {"label": "C", "text": "Poliomyelitis", "correct": false}, {"label": "D", "text": "Guillain- Barre Syndrome", "correct": false}], "correct_answer": "A. Myasthenia Gravis", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884604068-QTDK049007IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Myasthenia Gravis Chest X-ray shows the presence of a mediastinal mass, probably a thymoma, which is found chiefly in adolescent-onset Myasthenia Gravis. The above scenario point towards myasthenia gravis. Most patients present with ptosis or ophthalmoplegia (diplopia).</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. Botulism presents with descending acute flaccid paralysis. Early symptoms include blurred vision and difficulty speaking and swallowing. Option C. Poliomyelitis presents with asymmetric acute flaccid paralysis and may be associated with fever. Option D. Guillain- Barre Syndrome is the most common cause of acute flaccid paralysis in children with a prodromal respiratory or gastrointestinal infection. Paralysis is usually ascending and symmetrical.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old boy is brought to the clinic complaining of abnormal waddling gait. On examination, you observe that the child gets up from bed by taking support over his knees. He also has calf pseudohypertrophy. Laboratory investigation revealed highly elevated serum creatine kinase levels. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Duchenne muscular dystrophy", "correct": true}, {"label": "B", "text": "Facioscapulohumeral muscular dystrophy", "correct": false}, {"label": "C", "text": "Limb-girdle muscular dystrophy", "correct": false}, {"label": "D", "text": "Myotonic dystrophy 1", "correct": false}], "correct_answer": "A. Duchenne muscular dystrophy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Duchenne muscular dystrophy Children with DMD become symptomatic before the age of 5 years. Symptoms include waddling gait, Gower sign , and calf pseudohypertrophy .</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. Facioscapulohumeral muscular dystrophy has a variable onset, and symptoms include asymmetric facial weakness, followed by scapular fixator, humeral, and truncal weakness. Option C. Limb-girdle muscular dystrophy includes predominant lower limb weakness with cardiac or other systemic involvement. Option D. Myotonic dystrophy presents in childhood with myotonia, facial weakness, distal limb weakness, and cataracts.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The image shows a 14-year-old boy who presents to the clinic complaining of abnormally contracted muscles, facial weakness, and cataracts. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Duchenne muscular dystrophy", "correct": false}, {"label": "B", "text": "Facioscapulohumeral muscular dystrophy", "correct": false}, {"label": "C", "text": "Limb-girdle muscular dystrophy", "correct": false}, {"label": "D", "text": "Myotonic dystrophy 1", "correct": true}], "correct_answer": "D. Myotonic dystrophy 1", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884604200-QTDK049012IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Myotonic dystrophy 1 The image shows a Christmas tree cataract in myotonic dystrophy type 1.</p>\n<p><strong>Highyeild:</strong></p><p>It is caused by abnormal expansion of a trinucleotide (CTG) repeats in the DMPK gene on chromosome 19. Presents in childhood with myotonia, facial weakness, distal limb weakness, and cataract.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Children with DMD become symptomatic before the age of 5 years. Symptoms include waddling gait, Gower sign, and calf pseudohypertrophy. Option B. Facioscapulohumeral muscular dystrophy has a variable onset and symptoms include asymmetric facial weakness, followed by scapular fixator, humeral, and truncal weakness . Option C. Limb-girdle muscular dystrophy includes predominant lower limb weakness with cardiac or other systemic involvement.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15-year-old boy complains of difficulty seeing and weakness in facial expressions. Ophthalmoscopy finding is shown below: Which of the following trinucleotide repeat mutation will be seen in this condition?", "options": [{"label": "A", "text": "(CAG)n", "correct": false}, {"label": "B", "text": "(CTG)n", "correct": true}, {"label": "C", "text": "(CGG)n", "correct": false}, {"label": "D", "text": "(GAA)n", "correct": false}], "correct_answer": "B. (CTG)n", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884604273-QTDK049013IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>(CTG)n The image shows a Christmas tree cataract in myotonic dystrophy type 1 .</p>\n<p><strong>Highyeild:</strong></p><p>It is caused by abnormal expansion of a trinucleotide (CTG) repeats in the DMPK gene on chromosome 19. Presents in childhood with myotonia, facial weakness, distal limb weakness, and cataract.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. (CAG)n: Huntington's disease Option B. (CTG) n: Myotonic Dystrophy Option C. (CGG)n: Fragile X syndrome</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 19 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 11 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "The most common cause of respiratory distress in a post-term baby is", "options": [{"label": "A", "text": "Transient tachypnea of the newborn", "correct": false}, {"label": "B", "text": "Meconium aspiration syndrome", "correct": true}, {"label": "C", "text": "Hyaline membrane disease", "correct": false}, {"label": "D", "text": "Congenital heart disease", "correct": false}], "correct_answer": "B. Meconium aspiration syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Meconium aspiration syndrome Meconium aspiration syndrome is a respiratory disorder due to the aspiration of meconium content by the fetus during intrauterine life. It is the most common cause of respiratory distress in babies' post terms and Intrauterine growth restriction (IUGR).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Meconium aspiration syndrome is associated with all of the following:", "options": [{"label": "A", "text": "Occurs in post-term and Intrauterine growth restriction (IUGR) babies", "correct": false}, {"label": "B", "text": "Chest X-ray shows fluids in interlobar fissures", "correct": true}, {"label": "C", "text": "Pneumothorax is a common complication", "correct": false}, {"label": "D", "text": "Can be associated with surfactant deficiency", "correct": false}], "correct_answer": "B. Chest X-ray shows fluids in interlobar fissures", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Chest X-ray shows fluids in interlobar fissures Meconium aspiration syndrome (MAS) is more common in babies with post-term and Intrauterine growth restriction (IUGR).</p>\n<p><strong>Highyeild:</strong></p><p>Chest X-ray shows air leak, hyperinflation, flattening of the diaphragm, and atelectasis Pneumothorax is a common complication. Aspirated mucus can block the airways causing a telectasis and emphysema, triggering inflammation and inactivation of the surfactant.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "To manage which of the following disorders, inhaled nitric oxide is used?", "options": [{"label": "A", "text": "Transient tachypnea of the newborn(TTNB)", "correct": false}, {"label": "B", "text": "Neonatal respiratory distress syndrome (RDS)", "correct": false}, {"label": "C", "text": "Meconium aspiration syndrome", "correct": false}, {"label": "D", "text": "Persistent pulmonary hypertension of the newborn (PPHN)", "correct": true}], "correct_answer": "D. Persistent pulmonary hypertension of the newborn (PPHN)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Persistent pulmonary hypertension of the newborn (PPHN) Inhaled nitric oxide (iNO) is used in the treatment of persistent pulmonary hypertension in the newborn It is a known pulmonary vasodilator. In meconium aspiration syndrome, only if the child develops Persistent pulmonary hypertension of the newborn (PPHN) as a complication, Inhaled nitric oxide (iNO) used.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is not a complication of meconium aspiration?", "options": [{"label": "A", "text": "Pneumothorax", "correct": false}, {"label": "B", "text": "Pleural effusion", "correct": true}, {"label": "C", "text": "Persistent pulmonary hypertension", "correct": false}, {"label": "D", "text": "Pneumonia", "correct": false}], "correct_answer": "B. Pleural effusion", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pleural effusion Thick meconium aspiration causes a complete block of the airways, causing atelectasis and partial obstruction, causing air trapping leading to air leak syndromes like pneumothorax and emphysema. If thin meconium is aspirated, it causes inflammation and inactivates surfactant, which can lead to pneumonia. It can also lead to persistent pulmonary hypertension.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is the most common site of herniation of abdominal contents into the chest cavity in congenital diaphragmatic hernia?", "options": [{"label": "A", "text": "Foramen of Bochdalek", "correct": true}, {"label": "B", "text": "Esophageal hiatus", "correct": false}, {"label": "C", "text": "Foramen of Morgagni", "correct": false}, {"label": "D", "text": "Aortic hiatus", "correct": false}], "correct_answer": "A. Foramen of Bochdalek", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Foramen of Bochdalek In congenital diaphragmatic hernia (CDH), the herniation of abdominal contents into the chest cavity most commonly occurs through the foramen of Bochdalek. Hence, CDH is sometimes called Bochdalek's hernia . It is located on the left side of the diaphragm posteriorly. The following common site of herniation is through the foramen of Morgagni , which is anteriorly on the right side.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common cause of death in a child with congenital diaphragmatic hernia is:", "options": [{"label": "A", "text": "Pulmonary hypertension", "correct": false}, {"label": "B", "text": "Intracranial bleed", "correct": false}, {"label": "C", "text": "Pulmonary hypoplasia", "correct": true}, {"label": "D", "text": "Pneumonia", "correct": false}], "correct_answer": "C. Pulmonary hypoplasia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pulmonary hypoplasia In congenital diaphragmatic hernia, herniated abdominal contents enter the chest cavity and compress the developing lungs, resulting in pulmonary hypoplasia. Pulmonary hypoplasia is the most common cause of death in these babies.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 38 weeks term baby with a scan showing a congenital diaphragmatic hernia was delivered by emergency cesarean section. The baby did not cry at birth, HR &lt; 100/min and the child appeared blue. What is the immediate next step in management?", "options": [{"label": "A", "text": "Bag and mask ventilation", "correct": false}, {"label": "B", "text": "Chest compression", "correct": false}, {"label": "C", "text": "Intubate and ventilate", "correct": true}, {"label": "D", "text": "Continuous positive airway pressure (CPAP)", "correct": false}], "correct_answer": "C. Intubate and ventilate", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Intubate and ventilate In CDH, bag and mask ventilation can cause enlargement of the stomach and small bowels due to air, thus rendering oxygenation difficult by further compressing the lungs. Therefore, bag and mask ventilation is contraindicated in these children; the child is intubated , and subsequently, a nasogastric or orogastric tube is placed immediately for gastric decompression.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Extracorporeal membrane oxygenation (ECMO) is the therapeutic option for children with conventional or High-frequency oscillatory ventilation (HFOV) failure. Extracorporeal membrane oxygenation (ECMO) cannot be used in which of the following babies?", "options": [{"label": "A", "text": "Weight 1200-1500g", "correct": true}, {"label": "B", "text": "Congenital diaphragmatic hernia", "correct": false}, {"label": "C", "text": "Persistent pulmonary hypertension of the newborn( PPHN)", "correct": false}, {"label": "D", "text": "34-36 weeks", "correct": false}], "correct_answer": "A. Weight 1200-1500g", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Weight 1200-1500g Extracorporeal membrane oxygenation (ECMO) requires heparinization to prevent circuits from clotting, so there is a high risk of bleeding; hence in preterms &lt; 34 weeks and neonates with weight &lt; 2kgs – ECMO cannot be used because of the increased risk of IVH.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is false about persistent pulmonary hypertension of newborns (PPHN)?", "options": [{"label": "A", "text": "Due to delay or impairment in the average fall in pulmonary vascular resistance", "correct": false}, {"label": "B", "text": "Causes fixed hypoxemia", "correct": true}, {"label": "C", "text": "Difference in pre-ductal and post-ductal saturations &gt;5%", "correct": false}, {"label": "D", "text": "Can be idiopathic", "correct": false}], "correct_answer": "B. Causes fixed hypoxemia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Causes fixed hypoxemia A persistent pulmonary hypertension of a newborn (PPHN) usually has labile hypoxemia, involving a marked change in oxygen saturations with little or no change in ventilator settings. It can be due to an idiopathic cause —other Persistent pulmonary hypertension of newborns (PPHN) includes asphyxia , Hyaline membrane disease (HMD), meconium aspiration syndrome, congenital diaphragmatic hernia (CDH), and pulmonary vascular resistance. Persistent pulmonary hypertension of newborns (PPHN) occurs due to delay or impairment in the average fall in pulmonary vascular resistance.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following disease(s) is/are associated with PPHN:", "options": [{"label": "A", "text": "Congenital diaphragmatic hernia (CDH)", "correct": false}, {"label": "B", "text": "Meconium aspiration syndrome", "correct": false}, {"label": "C", "text": "Hyaline membrane disease", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Usually, the pulmonary pressure is high in the fetus, and it reduces after birth. The persistence of this high pulmonary pressure even after birth is called persistent pulmonary hypertension. It occurs as a complication in many diseases like Meconium aspiration syndrome(MAS), Hyaline membrane disease(HMD), Congenital diaphragmatic hernia(CDH), congenital pneumonia, and congenital heart diseases.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A preterm baby was born at 30 weeks +2 days; the baby was shifted to the Newborn intensive care unit (NICU), given two doses of surfactant, and was given respiratory distress. The baby had sepsis for which adequate and appropriate treatment was given, including IV ceftriaxone, IV gentamicin, IV glucose, and IV calcium carbonate. In due course, the baby improved marginally though even by 32 weeks of corrected gestational age, the baby could not be weaned off oxygen. What is the probable diagnosis?", "options": [{"label": "A", "text": "Apnea of prematurity", "correct": false}, {"label": "B", "text": "Bronchopulmonary dysplasia", "correct": true}, {"label": "C", "text": "Gastroesophageal reflux disease (GERD)", "correct": false}, {"label": "D", "text": "Pulmonary alveolar proteinosis", "correct": false}], "correct_answer": "B. Bronchopulmonary dysplasia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Bronchopulmonary dysplasia BPD is a chronic lung disease that occurs in preterm neonates , requiring prolonged oxygen support.</p>\n<p><strong>Highyeild:</strong></p><p>Caused by barotrauma and lung injury due to supplemental oxygen and mechanical ventilation that disrupts the lung development in preterms. Oxygen causes lung injury, fibrosis, and inflammation; this poor scavenging of free radicals further exacerbates lung injury. It should be suspected that the continued requirement of oxygen support in preterms at 28 days after birth.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 21 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 14 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 3week old neonate weighing 2.8kg was delivered by Lower Segment cesarean section (LSCS) for prolonged labor and was brought to the pediatrician for an umbilical swelling that developed within a few days after the cord fell off. There was no history of predisposing factors like umbilical sepsis, respiratory distress, or abdominal distension. The contents of the sac were easily reducible but appeared again. Which of the following statements is correct regarding it?", "options": [{"label": "A", "text": "It is treated by cauterization with silver nitrate", "correct": false}, {"label": "B", "text": "It can appear at any time and heal spontaneously", "correct": true}, {"label": "C", "text": "Definite surgical management has done immediately after diagnosis", "correct": false}, {"label": "D", "text": "Aspiration of the sac contents", "correct": false}], "correct_answer": "B. It can appear at any time and heal spontaneously", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883649930-QTDK022001IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>It can appear at any time and heal spontaneously Umbilical hernia develops due to incomplete closure /weakness of the muscular umbilical ring. Umbilical granuloma can be seen in some newborns after falling off the umbilical cord . It is the persistence of granulation tissue at the base of the umbilicus. The tissue is soft, 3 to 10mm in size, vascular and granular, colored dull red /pink, and may have a seropurulent discharge. Granulation tissue is treated by cauterizing with silver nitrate. Aspiration of sac contents is never done in an umbilical hernia.</p>\n<p><strong>Highyeild:</strong></p><p>Hernia appears as a soft swelling covered by skin that protrudes during crying, coughing, and straining in newborns and can be reduced easily through the fibrous ring at the umbilicus. In newborns, it can appear from birth to 6 months, and the majority will heal spontaneously. Rarely do they require surgery. Surgery is not advised unless the hernia persists for 4-5 years, causes symptoms, becomes strangulated, or becomes progressively larger after 1-2 years.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "As a pediatric intern, you were asked to assess the Ballard score in a newborn infant. Which of the following is an incorrect statement regarding the new Ballard score?", "options": [{"label": "A", "text": "Scoring system used to calculate the score for treatment of respiratory distress.", "correct": true}, {"label": "B", "text": "It assesses the physical and neuromuscular maturity of newborn", "correct": false}, {"label": "C", "text": "Highest and lowest score corresponds to 44 to -10", "correct": false}, {"label": "D", "text": "The Ballard score is accurate within two weeks of actual gestational age.", "correct": false}], "correct_answer": "A. Scoring system used to calculate the score for treatment of respiratory distress.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Scoring system used to calculate the score for treatment of respiratory distress. New Ballard score is used to assess the physical and neuromuscular maturity of newborn There are six criteria each to assess physical and neuromuscular maturity It can calculate gestational age from 20 to 44 weeks. Ballard scoring is accurate to +/- 2weeks The lowest score on the expanded new Ballard score is – 10, which corresponds to 20 weeks gestational age, and the highest score is 50, which corresponds to 44 weeks gestational age. An increase in score by 5 points corresponds to a rise in 2 weeks gestational age. Physical criteria include skin, lanugo, eye/ear, plantar crease, breast genitals Neuromuscular criteria: posture, wrist, arm recoil, popliteal angle, scarf sign, heel to ear</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A preterm baby was born 8 hrs back, referred for fetal distress, with Appearance, Pulse, Grimace, Activity, and Respiration APGAR scores 8 and 9 at one and five minutes of life. The Baby weighed 2.4kg. At the age of 8hrs, the baby developed respiratory distress and was admitted to the Neonatal intensive care unit (NICU) and was ventilated. After half an hour, the baby developed a seizure controlled by I.v phenobarbitone. A head ultrasound was taken, and it showed bleeding inside the ventricles, as shown in the picture. What is the staging of IVH as per the image shown?", "options": [{"label": "A", "text": "Stage 1", "correct": false}, {"label": "B", "text": "Stage 2", "correct": false}, {"label": "C", "text": "Stage 3", "correct": true}, {"label": "D", "text": "Stage 4", "correct": false}], "correct_answer": "C. Stage 3", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883650094-QTDK022003IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Stage 3 Intraventricular hemorrhage The most common site of intracranial bleeding in preterm is the Germinal matrix , which is present around lateral ventricles.</p>\n<p><strong>Highyeild:</strong></p><p>Germinal matrix contains immature neuroglial cell s with increased blood supply. It disappears by 28 to 32 weeks of intrauterine life. It can be associated with sequelae such as periventricular leukomalacia, cerebral palsy, seizures, and developmental delay. It can occur spontaneously / secondarily to trauma or birth asphyxia. There are four stages of Intraventricular hemorrhage. Grade 1: bleeding is isolated to the subependymal area. Grade 2: blood inside ventricles, no ventricular dilation. Grade 3: blood inside ventricles with ventricular dilation. Grade 4: intraparenchymal hemorrhagic infarction.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A female neonate with a birth weight of 2.6kg born by a vacuum-assisted vaginal delivery at birth was pale with no respiratory efforts. She was grossly pale with poor perfusion, lethargy, decreased muscle tone, and anemic and hypovolemic shock. On her head was a large fluctuating swelling with ecchymosis around the orbits. Mark the point where the underlying defect could be present", "options": [{"label": "A", "text": "A", "correct": false}, {"label": "B", "text": "B", "correct": false}, {"label": "C", "text": "C", "correct": true}, {"label": "D", "text": "D", "correct": false}], "correct_answer": "C. C", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883650383-QTDK022004IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>C SUBGALEAL HEMATOMA: there is a collection of blood under aponeurosis of the scalp. It is a large potential space thus, bleeding can be extensive.</p>\n<p><strong>Highyeild:</strong></p><p>It occurs as a result of ventouse delivery due to tears in emissary veins which connect to dural venous sinuses. It can also occur in hereditary coagulopathy and in association with skull fractures Caput succedaneum: it is a diffuse, ecchymotic, edematous collection in the soft tissue of the scalp with vertex presentation. It can extend across the suture of the skull and disappear in 1st week of life Cephalohematoma: it is a subperiosteal hemorrhage that is always limited to the surface of 1 cranial bone and doesn’t cross suture lines. Swelling appears only several hours after birth. There is no discoloration of the scalp. Most cephalohematomas are reserved within two weeks to 3 months, depending on their size. They require no treatment. Epidural hematoma: usually traumatic in origin, they are associated with CPD , prolonged labor, breech, precipitous labor, or as a result of mechanical assistance in labor. The majority of them resolve with no intervention</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "NVD delivered a term female neonate at 37 weeks with a birth weight of 2.7kg. She presented with yellowish discoloration of the body and sclera on the 2nd day of life. It then progressed to the trunk by day 4, and she was put on phototherapy. Jaundice completely disappeared on day 7. Which of the following is the cause for this type of jaundice?", "options": [{"label": "A", "text": "It is due to conjugated bilirubin", "correct": false}, {"label": "B", "text": "It is due to Rh incompatibility between maternal and fetal red blood cells", "correct": false}, {"label": "C", "text": "It is due to increased breakdown of fetal red blood cells", "correct": true}, {"label": "D", "text": "It is due to ABO incompatibility", "correct": false}], "correct_answer": "C. It is due to increased breakdown of fetal red blood cells", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>It is due to increased breakdown of fetal red blood cells The case scenario here is Physiological jaundice Jaundice associated with a rise in bilirubin at a rate of &lt; 5mg/dl/24hr suggests physiological jaundice. It is due to increased bilirubin production from the breakdown of fetal red blood cells combined with transient limitation in the conjugation of bilirubin by immature neonatal life. It first appears on the 2nd or 3rd day, usually peaks on the 4th day at 5 to 6 mg/dl, and then decreases to &lt; 2mg/dl between the 5th and 7th days after birth. Pathological jaundice: Jaundice appears within 24hrs after birth and presents at or beyond the age of 3 weeks in sick infants It is due to an increase in direct /conjugated bilirubin . Total serum bilirubin levels above the expected normal range, jaundice seen in the mid-abdominal region and soles.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A preterm neonate in the 2nd week of life presented with abdominal distension, lethargy, and cyanosis. Mother observed blood in stools. On examination: absent bowel sounds, and bradycardia is present. X-ray abdomen is shown below: The following are the risk factors associated with the conditions except", "options": [{"label": "A", "text": "Prematurity", "correct": false}, {"label": "B", "text": "Neonatal sepsis", "correct": false}, {"label": "C", "text": "Feeding using animal milk", "correct": false}, {"label": "D", "text": "Hepatitis B vaccination", "correct": true}], "correct_answer": "D. Hepatitis B vaccination", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883651526-QTDK022007IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hepatitis B vaccination The above diagnosis would be necrotizing enterocolitis . Hepatitis B vaccination doesn't cause necrotizing enterocolitis. Option Prematurity is the most important risk factor for NEC (less than 32 weeks) Option B. Neonatal sepsis can also be contributory in NEC Option C. Gut in the preterm neonate is premature, use of animal milk causes injury and hence vasoconstriction in the gut mucosa. Vaccines can be associated with certain neonatal disorders like the Rotavirus vaccine can be associated with Intussusception, BCG can be associated with lymphadenopathy , etc. But Necrotizing enterocolitis is not associated with any vaccine side effect.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A premature VLBW infant presented with feeding intolerance, vomiting, diarrhea, and temperature instability at two months of age. On plain abdominal X-ray, pneumoperitoneum was detected. On Abdominal Ultrasonography, gas was present in the portal vein. Which of the following is incorrect about the management of the disease?", "options": [{"label": "A", "text": "Exclusive breastfeeding.", "correct": true}, {"label": "B", "text": "A nasogastric tube is inserted.", "correct": false}, {"label": "C", "text": "Fluid and electrolyte correction.", "correct": false}, {"label": "D", "text": "IV antibiotics.", "correct": false}], "correct_answer": "A. Exclusive breastfeeding.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Exclusive breastfeeding. Oral feeding is discontinued completely Because oral feeding can be a risk factor for worsening Necrotizing enterocolitis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. A nasogastric tube is inserted to relieve distension and to aspirate abdominal contents Option: C. Fluid and the electrolyte is given judiciously for supportive care. Option: D. IV antibiotics to prevent neonatal sepsis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3 weeks old infant with a low-birth-weight present with blood in stools, lethargy, glucose instability, And distension of the abdomen. On X-ray: pneumatosis intestinalis is seen Which of the following is the most important measure to prevent the disease?", "options": [{"label": "A", "text": "Use of antibiotics", "correct": false}, {"label": "B", "text": "Feeding with human milk", "correct": true}, {"label": "C", "text": "Use of probiotics and prebiotics", "correct": false}, {"label": "D", "text": "Prophylactic use of PPIs", "correct": false}], "correct_answer": "B. Feeding with human milk", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Feeding with human milk Exclusive human milk feeding has decreased the incidence of Necrotizing enterocolitis . Because human milk has many nutrients and protective factors that boost immunity and protect against Necrotising enterocolitis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Use of antibiotics in early neonatal life can predispose to NEC Option: C. Use of prebiotics and probiotics can help prevent NEC, but these are not the most important measure to prevent the disease. The most important preventive measure is exclusive breastfeeding Option: D. Injudicious use of proton pump inhibitors can predispose to gut infections</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term newborn with an Apgar score of 3 at 5 minutes, which is sluggish with the inability to suck and marked hypotonia. Cord blood ABG showed pH less than seven, and bicarbonate base deficit of more than 12 mmol /Land multiple organ dysfunction is present. Diagnosis made as perinatal asphyxia (HIE) What classification is used for HIE?", "options": [{"label": "A", "text": "Modified Bells staging", "correct": false}, {"label": "B", "text": "Levene classification", "correct": true}, {"label": "C", "text": "P RIFLE classification", "correct": false}, {"label": "D", "text": "None of the above", "correct": false}], "correct_answer": "B. Levene classification", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Levene classification Levene classification is used for HIE classification. HIE stage 1 is associated with Exaggerated reflexes and sympathetic overactivity. HIE stage 2 is associated with seizures . HIE stage 3 is associated with lethargy and Parasympathetic overactivity.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Modified Bells staging is used to classify NEC. Option: C. P RIFLE classification is used to classify AKI</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-week-old newborn with Gestational age of 32 weeks with a birth weight of 1500gms was diagnosed with Necrotizing enterocolitis: Which of the following is/are accurate about the above condition? Major risk factors are prematurity, use of formula feeds, and bacterial colonization of the gut Levene staging is used to classify the disease Antenatal corticosteroid clinically has a role in prevention in premature infants The distal ileum and proximal colon most frequently involved Oral feeding shouldn't be discontinued Select the correct answer from given below code:", "options": [{"label": "A", "text": "1,2,3", "correct": false}, {"label": "B", "text": "1,3", "correct": false}, {"label": "C", "text": "2,4", "correct": false}, {"label": "D", "text": "1,3,4", "correct": true}], "correct_answer": "D. 1,3,4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,3,4 Major risk factors are prematurity, use of formula feeds and bacterial colonization of the gut. Levene classification is used to classify HIE , In NIC modified Bell's staging is used Antenatal corticosteroid has a role in prevention of NEC in preterm neonates In most cases , the distal ileum and proximal colon is the most frequently involved. Oral feeding should be completely discontinued Because oral feeding can be a risk factor for worsening Necrotizing enterocolitis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A newborn with seizures and a poor Apgar score of 3 even 10 minutes after resuscitation. Analysis was done, and a diagnosis of HIE is suspected. What is the investigation of choice for HIE?", "options": [{"label": "A", "text": "CT brain", "correct": false}, {"label": "B", "text": "MRI Brain", "correct": true}, {"label": "C", "text": "Xray skull", "correct": false}, {"label": "D", "text": "CECT Brain", "correct": false}], "correct_answer": "B. MRI Brain", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>MRI Brain Investigation of choice for HIE is MRI Brain. MRI brain shows distinct changes in brain matter that help to establish the diagnosis of HIE .</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A neonate with HIE presented with lethargy, one episode of seizures, feeding difficulty due to the inability to suck, and marked hypotonia are seen. What stage of levene classification would you assign to this baby?", "options": [{"label": "A", "text": "Mild", "correct": false}, {"label": "B", "text": "Moderate", "correct": true}, {"label": "C", "text": "Severe", "correct": false}, {"label": "D", "text": "Very severe", "correct": false}], "correct_answer": "B. Moderate", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Moderate Moderate as per Levene classification for HIE. Option: B. Moderate: Lethargy, Marked hypotonia, seizures and unable to suck CLASSIFICATION OF HIE (LEVENE) table,tr,th,td {border:1px solid black;} Feature Mild Moderate Severe Consciousness Irritable Lethargy Comatose Tone Hypotonia Marked Severe Seizure No Yes Prolonged Sucking/Resp. Poor Suck Unable to suck Unable to sustain spont Resp.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Mild: Irritable, Hypotonia, No seizures, and Poor suck. It is associated with Sympathetic overactivity . Option: C. Severe: Comatose, Severe hypotonia, prolonged seizures, and Unable to sustain spontaneous respiration. It is associated with Parasympathetic overactivity.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A preterm neonate presents with hematochezia, cellulitis, and anterior abdominal wall edema. On examination, bowel sounds are absent. On X-ray, the air is seen in the submucosa of the bowel wall, and on USG, gas in the portal vein is seen. What is your diagnosis?", "options": [{"label": "A", "text": "Stage 2A of Necrotizing enterocolitis", "correct": false}, {"label": "B", "text": "Stage 3B of Necrotizing enterocolitis", "correct": false}, {"label": "C", "text": "Stage 2B of Necrotizing enterocolitis", "correct": true}, {"label": "D", "text": "Stage 1B of Necrotizing enterocolitis", "correct": false}], "correct_answer": "C. Stage 2B of Necrotizing enterocolitis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Stage 2B of Necrotizing enterocolitis Gas in the portal vein means Pneumatosis Portalis, which is seen in Stage 2B of Modified Bells staging for NEC. STAGE SYSTEMICSIGNS ABDOMINALSIGNS RADIOGRAPHIC SIGNS IA Suspected Temperature instability, apnea, bradycardia, lethargy Gastric residuals, abdominal distension, emesis, guaiac positive tool Normal or intestinal dilation; mild ileus IB Suspected Same as IA Gross bloody stool Same as IA ΠΑ Definite, mildly ill Same as LA IA,IB plus decreased or absent bowel sounds with/without abdominal tenderness Intestinal dilation, leas, pneumatosis intestinalis пв Definite, moderately ill IIA plus mild metabolic acidosis and mild thrombocytopenia IIA plus abdominal tenderness plus absent bowel sounds with/without abdominal cellulitis, or right lower quadrant mass, absent bowel sounds IIA plus abdominal tenderness plus absent bowel sounds with/without abdominal cellulitis, or right lower quadrant mass, absent bowel sounds IIIA Advanced, severely ill, intact bowel IIB plus hypotension, bradycardia, severe apnea, combined respiratory and metabolic acidosis, DIC, neutropenia, ஊuria IIB plus signs of peritonitis, marked abdominal tenderness, distension, and abdominal wall erythema IIB plus definite ascites IIIB Advanced, severely ill, perforated bowel Same as IIIA Same as IIIA IIB plus pneumoperitoneum Adapted from: NeuJ. Necrotizing enterocolitis: the search for a unifying pathogenic theory leading to prevention. Pediatr Clin North Am. 1996;43(2):409–43:</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Following are the radiological sign seen in a preterm newborn with abdominal distension, blood in stools, and complications like sepsis and DIC. X-ray abdomen shows: Identify the disease of the newborn:", "options": [{"label": "A", "text": "Diaphragmatic hernia", "correct": false}, {"label": "B", "text": "Duodenal atresia", "correct": false}, {"label": "C", "text": "Necrotizing Enterocolitis", "correct": true}, {"label": "D", "text": "Intussusception", "correct": false}], "correct_answer": "C. Necrotizing Enterocolitis", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883651724-QTDK022016IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Necrotizing Enterocolitis The given Xray abdomen shows pneumoperitoneum suggestive of Intestinal perforation (Football sign) The second Xray shows air shadows in the walls of the intestine (pneumatosis intestinalis): Hallmark of NEC</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Diaphragm appears normal. So, it is not a Diaphragmatic hernia. Option: B. Duodenal atresia shows a double bubble sign, which is not seen in the given image Option: D. Intussusception on Xray shows a claw sign which is Not seen in the given image</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 24 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 6 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Which of the following complications is not commonly associated with preterm babies?", "options": [{"label": "A", "text": "Apnea", "correct": false}, {"label": "B", "text": "Intraventricular hemorrhage (IVH)", "correct": false}, {"label": "C", "text": "Hypoglycemia", "correct": false}, {"label": "D", "text": "Polycythemia", "correct": true}], "correct_answer": "D. Polycythemia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Polycythemia Preterm babies are prone to several complications; many of these complications overlap with those of Intrauterine growth restriction (IUGR)babies. Anemia is more common in preterm infants compared to polycythemia Polycythemia is more common in Intrauterine growth restriction (IUGR) babies.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common site of intracranial bleeding in preterm infants is", "options": [{"label": "A", "text": "Lateral ventricle", "correct": false}, {"label": "B", "text": "Germinal matrix", "correct": true}, {"label": "C", "text": "Basal ganglia", "correct": false}, {"label": "D", "text": "Cerebellum", "correct": false}], "correct_answer": "B. Germinal matrix", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Germinal matrix Preterm babies are prone to develop intracranial bleeds (a rare complication in IUGR babies). The most common site of intracranial bleeding in premature infants is the gelatinous subependymal germinal matrix (the area around lateral ventricles). Immature blood vessels in this highly vascular region of the developing brain and poor tissue vascular support predispose premature infants to hemorrhage.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common ischemic brain injury in preterm new-borns is", "options": [{"label": "A", "text": "Periventricular leukomalacia", "correct": true}, {"label": "B", "text": "Basal ganglia infarcts", "correct": false}, {"label": "C", "text": "Cerebellar infarcts", "correct": false}, {"label": "D", "text": "Status marmoratus", "correct": false}], "correct_answer": "A. Periventricular leukomalacia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Periventricular leukomalacia Periventricular leukomalacia is the most common ischemic brain injury in preterm newborns. It includes necrosis of the white matter around the ventricles. It is commonly associated with hydrocephalus ex vacuo (normal pressure hydrocephalus). Most of these preterm newborns with periventricular leukomalacia develop spastic diplegia subtype of cerebral palsy.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "This is the Ultra Sound Sonography test USG brain of a 30-week preterm baby demonstrating intraventricular hemorrhage (IVH). What grade of IVH do you diagnose based on the Image below:", "options": [{"label": "A", "text": "Grade 1 Germinal matrix-intraventricular hemorrhage IVH", "correct": false}, {"label": "B", "text": "Grade 2 intraventricular hemorrhage IVH", "correct": false}, {"label": "C", "text": "Grade 3 intraventricular hemorrhage IVH", "correct": false}, {"label": "D", "text": "Grade 4 intraventricular hemorrhage IVH", "correct": true}], "correct_answer": "D. Grade 4 intraventricular hemorrhage IVH", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883676822-QTDK023004IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Grade 4 intraventricular hemorrhage IVH GRADES OF IVH Grade I IVH - bleeding is isolated to the subependymal (germinal matrix) area Grade II IVH - bleeding within the ventricle without evidence of ventricular dilation . Grade III IVH is bleeding within the ventricles with ventricular dilation (post-hemorrhage hydrocephalus). Grade IV IVH - both intraventricular and parenchymal hemorrhage. In the USG image shown, there is evidence of both intraventricular and parenchymal bleeding, suggestive of grade 4 IVH.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the most common drug used to treat apnea of prematurity?", "options": [{"label": "A", "text": "Theophylline", "correct": false}, {"label": "B", "text": "Caffeine citrate", "correct": true}, {"label": "C", "text": "Aminophylline", "correct": false}, {"label": "D", "text": "Beta blockers", "correct": false}], "correct_answer": "B. Caffeine citrate", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Caffeine citrate Recurrent or persistent apnea of prematurity is effectively treated with Methylxanthines.</p>\n<p><strong>Highyeild:</strong></p><p>Methylxanthines increase central respiratory drive by lowering the threshold of response to hypercapnia, enhancing the diaphragm's contractility, and preventing diaphragmatic fatigue. Caffeine citrate and theophylline are similarly effective Methylxanthines, but caffeine citrate is preferred because of its longer half-life and lower potential for side effects.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A term Intra uterine growth rate IUGR newborn baby with a weight of 1.8 kg was delivered by normal vaginal delivery. By 12 hours of life, the baby had one tonic seizure episode, which resolved without management; you check blood sugar which is 24 mg/dl. What is the first management decision that you would like to take?", "options": [{"label": "A", "text": "Oral feeds and check sugar after 30min", "correct": false}, {"label": "B", "text": "10% dextrose infusion at 6 mg/kg/min", "correct": false}, {"label": "C", "text": "10% dextrose 2ml/kg iv bolus", "correct": true}, {"label": "D", "text": "10% dextrose 6 ml/kg iv bolus", "correct": false}], "correct_answer": "C. 10% dextrose 2ml/kg iv bolus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>10% dextrose 2ml/kg iv bolus In symptomatic neonates with hypoglycemia: A bolus of 2 ml/kg of 10% dextrose should be given, followed by glucose infusion at an initial rate of 6 mg/kg/min. Blood sugar levels should be checked after 30-45 minutes and then 6 hours.</p>\n<p><strong>Highyeild:</strong></p><p>The infusion rate is gradually increased in case of poor/no response (8 mg/kg/min, then 10 mg/kg/min, and finally a maximum of 12 mg/kg/min) Since, in this case, the neonate is symptomatic (has a seizure episode), the child should be first administered IV 10% dextrose bolus (2 ml/kg), and subsequently, glucose infusion at 6 mg/kg/minute should be started.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 16 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 15 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "You are presenting a case of acute rheumatic fever, and post the presentation, the sr asks you about the late manifestations of arf. Which of the following will be considered a late manifestation?", "options": [{"label": "A", "text": "Carditis", "correct": false}, {"label": "B", "text": "Arthritis", "correct": false}, {"label": "C", "text": "Erythema marginatum", "correct": false}, {"label": "D", "text": "Chorea", "correct": true}], "correct_answer": "D. Chorea", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Chorea Early manifestations Late manifestations A. Carditis Chorea B. Arthritis Subcutaneous nodules C.Erythema marginatum</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is false concerning rheumatic fever?", "options": [{"label": "A", "text": "Arthritis in rheumatic fever usually affects the small joints and leaves residual damage", "correct": true}, {"label": "B", "text": "Subcutaneous nodules are associated with carditis", "correct": false}, {"label": "C", "text": "Chorea occurs more frequently in females than males", "correct": false}, {"label": "D", "text": "Erythema marginatum lessons are usually induced by heat", "correct": false}], "correct_answer": "A. Arthritis in rheumatic fever usually affects the small joints and leaves residual damage", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Arthritis in rheumatic fever usually affects the small joints and leaves residual damage Arthritis: No residual damage Involves large joints Subcutaneous nodules: late manifestation, non-tender Usually associated with carditis Chorea Late manifestations Semi-purposeful jerky movements Females &gt;&gt; males Erythema marginatum Annular/ serpiginous lesions Usually present on tunk Induced by heat</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old boy comes to the clinic with a fever, multiple joint pain, and a non-itching red rash with a pale center spread over the trunk. Which of the following is true about the condition?", "options": [{"label": "A", "text": "It is caused by antibodies produced against Group B beta-hemolytic streptococci", "correct": false}, {"label": "B", "text": "Only the heart valves are permanently damaged during an episode of this disease.", "correct": true}, {"label": "C", "text": "Sydenham’s chorea occurs immediately after the onset of acute rheumatic fever.", "correct": false}, {"label": "D", "text": "Elevated levels of antistreptolysin O (ASO) are diagnostic of this disease.", "correct": false}], "correct_answer": "B. Only the heart valves are permanently damaged during an episode of this disease.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Only the heart valves are permanently damaged during an episode of this disease. The boy's history has three major criteria according to revised Jones criteria (only two major or one major and two minor criteria are required to make a diagnosis of acute rheumatic fever).</p>\n<p><strong>Highyeild:</strong></p><p>During an episode of rheumatic fever, only heart valves are permanently damaged, whereas pericarditis, chorea, and arthritis resolve completely. The most common valve involved is the Mitral valve.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Rheumatic fever is caused due to antibodies produced against cell wall proteins of Group A beta-hemolytic streptococci. Option C. Sydenham’s chorea, which is one of the major criteria, occurs about three months after the onset of the rheumatic fever. Option D. Elevated levels of antistreptolysin O (ASO) indicate previous streptococcal infection and not rheumatic fever.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 12-year-old girl presents to the clinic with a fever, multiple joint pains, and chorea. History of sore throat present ten days ago. Further history taking reveals she comes from an area where the incidence of rheumatic fever is 1/100,000 among the school-going age group. Which of the following is not a minor criterion according to revised Jones criteria for acute rheumatic fever?", "options": [{"label": "A", "text": "Polyarthralgia", "correct": false}, {"label": "B", "text": "ESR ≥ 30 mm/hr", "correct": true}, {"label": "C", "text": "Fever ≥ 38.5˚C", "correct": false}, {"label": "D", "text": "Prolonged PR interval", "correct": false}], "correct_answer": "B. ESR ≥ 30 mm/hr", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>ESR ≥ 30 mm/hr Minor criteria include ESR ≥ 60 mm/hr not ≥ 30 mm/hr.</p>\n<p><strong>Highyeild:</strong></p><p>The American Heart Association (AHA) revised the Jones criteria in 2015 to diagnose acute rheumatic fever (ARF). The updated criteria include: Major criteria: Clinical or subclinical carditis Arthritis (monoarthritis or polyarthritis) Polyarthralgia Chorea Erythema marginatum Subcutaneous nodules Minor criteria: Prolonged PR interval Arthralgia Fever Markers of inflammation Low-risk populations are defined as where the incidence of rheumatic fever &lt; 2/100,000 in school-going children and rheumatic heart disease prevalence &lt; 1/1000.</p>\n<p><strong>Random:</strong></p><p>Option A, B, C &amp; D. Hence, this question shows that the girl belongs to a low-risk population. In low-risk populations, minor criteria include polyarthralgia, fever ≥ 38.5˚C, ESR ≥ 60 mm/hr ; CRP ≥3.0 mg/dl, prolonged PR interval (suggestive of AV Block or slow conduction).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old girl presents to the clinic with joint pain, fever, and rashes. Laboratory investigation shows elevated levels of ASO titers and CRP. History reveals she comes from an area where the incidence of rheumatic fever is 3/100,000 in school-going children and the prevalence of rheumatic heart disease is 2/1000. Which of the following is not a major criterion in the Revised Jones criteria for acute rheumatic fever?", "options": [{"label": "A", "text": "Carditis", "correct": false}, {"label": "B", "text": "Monoarthritis", "correct": false}, {"label": "C", "text": "Polyarthralgia", "correct": false}, {"label": "D", "text": "Monoarthralgia", "correct": true}], "correct_answer": "D. Monoarthralgia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Monoarthralgia Revised Jones criteria for acute rheumatic fever lists out major and minor criteria for high-risk and low-risk populations Monoarthralgia is a minor criteria in high-risk populations. In low-risk populations, minor criteria include polyarthralgia, fever ≥ 38.5˚C, ESR ≥ 60 mm/hr; CRP ≥3.0 mg/dl, prolonged PR interval (suggestive of AV Block or slow conduction).</p>\n<p><strong>Highyeild:</strong></p><p>High-risk populations are defined as where the incidence of rheumatic fever &gt; 2/100,000 in school-going children and rheumatic heart disease prevalence &gt;1/1000.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A, B, C. This question shows that the girl belongs to a high-risk population. Major criteria for high-risk population includes clinical or subclinical carditis, polyarthritis or monoarthritis, polyarthralgia, chorea, erythema marginatum, and subcutaneous nodules.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 11-year-old boy presents to the clinic complaining of fever, chest pain, and joint pain. Echocardiography showed mitral regurgitation, and a diagnosis of acute rheumatic fever was made. Which of the following is not an auscultatory finding?", "options": [{"label": "A", "text": "Soft first heart sound", "correct": false}, {"label": "B", "text": "Decrescendo diastolic murmur at pulmonic area", "correct": true}, {"label": "C", "text": "Delayed diastolic mitral murmur", "correct": false}, {"label": "D", "text": "Pan systolic murmur at apex radiating to the left axilla.", "correct": false}], "correct_answer": "B. Decrescendo diastolic murmur at pulmonic area", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Decrescendo diastolic murmur at pulmonic area Because of less common involvement of this valve. Mitral, aortic and tricuspid valves are involved in rheumatic fever carditis. Decrescendo diastolic murmur at the pulmonic area is due to pulmonary valve regurgitation, which is not seen in rheumatic fever carditis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Soft first heart sound is heard due to involvement of the mitral valve Option C. Carey Coomb’s murmur is heard in rheumatic fever carditis. This is a soft, delayed diastolic mitral murmur due to blood flowing across the inflamed and thickened mitral valve. Option D. pansystolic murmur at the apex radiating to the left axilla is due to mitral regurgitation , which is seen in 95% of cases of rheumatic fever carditis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15-year-old boy presents with fever, chest pain, and multiple joint pain ten days after an episode of sore throat. He has had a similar episode of acute rheumatic fever in the past. Which of the following is true about the prevention of this disease?", "options": [{"label": "A", "text": "At this stage, prevention will be primary prevention.", "correct": false}, {"label": "B", "text": "Secondary prevention includes 12 million units of benzathine penicillin every three weeks.", "correct": false}, {"label": "C", "text": "Patients without proven carditis should receive prophylaxis for five years after the last episode or until they are 18.", "correct": true}, {"label": "D", "text": "Patients with proven carditis should receive prophylaxis for five years after the last episode or until they are 25.", "correct": false}], "correct_answer": "C. Patients without proven carditis should receive prophylaxis for five years after the last episode or until they are 18.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Patients without proven carditis should receive prophylaxis for five years after the last episode or until they are 18. Secondary prophylaxis includes that patients without proven carditis should receive prophylaxis for five years after the last episode or until they are 18 years old, whichever is longer.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. As the patient already has an active episode of rheumatic fever , starting prophylactic measures now would be called secondary prevention. Primary prevention requires the identification of streptococcal sore throat and its prompt treatment with penicillin. Option B. Secondary prevention of acute rheumatic fever involves giving an intramuscular injection of benzathine penicillin 1.2 million units every three weeks or 0.6 million units every alternate week. Option D. Patients with proven carditis should receive prophylaxis for ten years after the last episode or until they are 25. This will ensure the treatment of any residual heart lesion and the prevention of endocarditis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 17-year-old boy presents to the emergency department with severe cough and dyspnea developing over the past week. On examination, the patient has tachycardia. Soon after admission, his saturation dropped, and he developed respiratory arrest. Autopsy reveals the following a lesion in heart valves: What is the most likely diagnosis?", "options": [{"label": "A", "text": "Infective endocarditis", "correct": false}, {"label": "B", "text": "Rheumatic heart disease", "correct": true}, {"label": "C", "text": "Hypertrophic obstructive cardiomyopathy", "correct": false}, {"label": "D", "text": "Pulmonary embolism", "correct": false}], "correct_answer": "B. Rheumatic heart disease", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883843887-QTDK029009IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rheumatic heart disease The image shows Aschoff nodules present in heart valves which indicates active inflammation. The history suggests of rheumatic heart disease with severe mitral regurgitation resulting in left ventricular failure and pulmonary congestion. Tachycardia occurs to compensate for heart failure. So, that adequate cardiac output is maintained.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Infective endocarditis can cause congestive heart failure but biopsy of the valves would show inflammatory cells and not Aschoff bodies. Option C. Hypertrophic obstructive cardiomyopathy patients present with exertional dyspnea, anginal pain, palpitation, syncope and sudden death. Heart valves are not involved and there is no significant inflammation seen in biopsy. Option D. Pulmonary embolism: It is very acute in onset and symptoms include severe chest pain, dyspnea, tachycardia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 18-year-old boy with a history of 3 episodes of rheumatic fever presents for a routine check-up. Three-dimensional echocardiography of the mitral valve shows a similar picture: Which of the following is true about the treatment?", "options": [{"label": "A", "text": "Beta blockers are contraindicated", "correct": false}, {"label": "B", "text": "Trans-septal mitral commissurotomy is indicated", "correct": true}, {"label": "C", "text": "Diuretics are contraindicated", "correct": false}, {"label": "D", "text": "Risk of restenosis after valvotomy is negligible", "correct": false}], "correct_answer": "B. Trans-septal mitral commissurotomy is indicated", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682883844902-QTDK029010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Trans-septal mitral commissurotomy is indicated The image shows rheumatic mitral stenosis with a characteristic “fish mouth” This is helpful in treating the stenotic mitral valve.</p>\n<p><strong>Highyeild:</strong></p><p>Balloon mitral valvotomy or percutaneous trans-septal mitral commissurotomy has replaced closed or open commissurotomy for MS</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Beta blockers or digoxin should be given to these patients by reducing resting and exercise heart rates and thus improving diastolic filling. Option C. Diuretics help by reducing pulmonary venous congestion. Option D. Long-term follow-up after valvotomy is mandatory because of the significant risk of restenosis with time.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 18-year-old girl with a known case of rheumatic heart disease comes for a regular follow-up. Which of the following is false about valves involved in rheumatic heart disease?", "options": [{"label": "A", "text": "Mitral regurgitation is most commonly seen", "correct": false}, {"label": "B", "text": "Aortic regurgitation is often seen along with Mitral regurgitation", "correct": false}, {"label": "C", "text": "Pure aortic regurgitation is more commonly seen than mitral stenosis", "correct": true}, {"label": "D", "text": "Tricuspid regurgitation is seen in 20-50% patients of RHD.", "correct": false}], "correct_answer": "C. Pure aortic regurgitation is more commonly seen than mitral stenosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pure aortic regurgitation is more commonly seen than mitral stenosis In RHD, mitral stenosis is the second most common after mitral regurgitation. Mitral Stenosis usually occurs in chronic RHD. Pure aortic regurgitation is rare and occurs in around 5% of cases.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Mitral regurgitation is seen in 80-85% of cases Option B. Aortic regurgitation along with mitral regurgitation is seen in 25% of cases Option D. Tricuspid regurgitation is seen in 20-50% of patients of RHD in children.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The mother of a 2-month-old infant brings her child to the clinic with complaints of increased breaks between feeds, irritability and crying excessively, and facial puffiness. On auscultation, an S3 gallop is heard and confirmed that the baby was in congestive cardiac failure. Which of the following is not a cause of diastolic heart failure?", "options": [{"label": "A", "text": "Mitral stenosis", "correct": false}, {"label": "B", "text": "Aortic stenosis", "correct": true}, {"label": "C", "text": "Restrictive cardiomyopathy", "correct": false}, {"label": "D", "text": "Ventricular hypertrophy", "correct": false}], "correct_answer": "B. Aortic stenosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Aortic stenosis Cardiac failures can be divided into systolic and diastolic failures. Aortic stenosis causes decreased cardiac output and thus causes systolic failure</p>\n<p><strong>Highyeild:</strong></p><p>Systolic failure refers to the heart's inability to meet the body's metabolic needs. Diastolic failure refers to the inability of the ventricles to get filled during diastole. This can be associated with S4 (Fourth heart sound)</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Mitral stenosis prevents blood from the left atrium from flowing into the left ventricle and thus causes inadequate filling of the ventricular cavity. Option C. Restrictive cardiomyopathy prevents ventricles from expanding during diastole and thus reduces its filling. Option D. In ventricular hypertrophy, the volume of the ventricular cavities is reduced and thus causing reduced filling.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-month-old infant presents with poor weight gain, decreased feeding, excessive crying, and lower limb swelling. Laboratory investigation shows hemoglobin of 5g/dl. Which of the following will not help in the treatment of this condition?", "options": [{"label": "A", "text": "Reducing cardiac work", "correct": false}, {"label": "B", "text": "Correcting the underlying cause", "correct": false}, {"label": "C", "text": "Increasing venous return", "correct": true}, {"label": "D", "text": "Intravenous inotropic agents", "correct": false}], "correct_answer": "C. Increasing venous return", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Increasing venous return The question point towards severe anemia in failure. This can be treated by reducing cardiac output, correcting the underlying causes, and IV inotropic agents but not increasing venous return. Reducing venous return (preload) is done by administering diuretics. This reduces heart size. The larger the heart, the more the wall tension and the poorer is the performance. With the reduction in heart size and volume, the myocardial function and the cardiac outcome improve.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Reducing cardiac work: By correcting anemia, restricting activities, and mechanical ventilation. Option B. Underlying causes such as CHD , coarctation of the aorta, etc, should be diagnosed early and treated curatively or palliatively. Option D. IV inotropes such as dopamine, amrinone, and levosimendan are used in different settings to help in increasing myocardial contractility.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-year-old infant is brought to the clinic with lower limb swelling, wheezing, increased breaks between feeds, and forehead sweating. Pediatrician plans to augment myocardial contractility by administering digoxin. Which of the following is false regarding digoxin treatment?", "options": [{"label": "A", "text": "It has delayed the onset of action.", "correct": true}, {"label": "B", "text": "Children are digitalized within a 24-hour period, followed by a maintenance dose.", "correct": false}, {"label": "C", "text": "Digoxin toxicity is monitored by looking at PR interval", "correct": false}, {"label": "D", "text": "Digitalizing dose is between 0.04 to 0.08 mg/kg.", "correct": false}], "correct_answer": "A. It has delayed the onset of action.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>It has delayed the onset of action. Digoxin has a rapid onset of action and is eliminated rapidly. Digoxin is eliminated by kidneys, so it can accumulate in renal failure.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. Children are digitalized within a 24-hour Half the calculated digitalizing dose is given initially, followed by ¼ in 6-8 hours and the final ¼ after another 6-8 hours. The maintenance dose is ¼ of the digitalizing dose. Option C. Before the third daily dose, an ECG is obtained, and if the PR interval exceeds the initial interval by 50% , digitalis toxicity is present. (Upper limit of normal PR interval in infants is 0.14 seconds) Option D. Digitalizing dose in neonates is 0.04 mg/kg, one month to 1 year: 0.08 mg/kg, 1 to 3 years: 0.06 mg/kg, &gt; three years: 0.04 mg/kg .</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old girl with lower limb swelling, palpitations, and increased respiratory rate was brought to the clinic three days back, following which she was started on oral digoxin. Her ECG shows a PR interval of 0.12 seconds. What would you do next?", "options": [{"label": "A", "text": "Omit the next two doses.", "correct": false}, {"label": "B", "text": "Stop digoxin and switch to ACE inhibitors", "correct": false}, {"label": "C", "text": "No change in treatment is needed.", "correct": true}, {"label": "D", "text": "Decrease the maintenance dose of digoxin", "correct": false}], "correct_answer": "C. No change in treatment is needed.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>No change in treatment is needed. Before the third daily dose, an ECG is obtained, and if the PR interval exceeds the initial interval by 50%, digitalis toxicity is present. (Upper limit of normal PR interval in infants is 0.14 seconds)</p>\n<p><strong>Highyeild:</strong></p><p>PR interval is in normal limit and hence no change in treatment is needed because digitalis toxicity is less likely here.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. If the PR interval exceeds 0.14 seconds, the next one or two doses should be omitted. Option B &amp; D. There is no indication to stop or decrease digoxin. Digoxin can be combined with ACE inhibitors for a synergistic effect.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-month-old infant with VSD is brought to the clinic with poor weight gain, increased breaks between feeds, fast breathing, and cough. Pediatrician decides to start him with IV dobutamine. Which of the following is true about using inotropes in congestive cardiac failure?", "options": [{"label": "A", "text": "Dopamine should be used at a dose of 20 µg/kg/min", "correct": false}, {"label": "B", "text": "In patients with dilated cardiomyopathy, dobutamine is used", "correct": true}, {"label": "C", "text": "Levosimendan acts by opening potassium channels", "correct": false}, {"label": "D", "text": "Milrinone is a calcium sensitizer used as a potent indicator", "correct": false}], "correct_answer": "B. In patients with dilated cardiomyopathy, dobutamine is used", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>In patients with dilated cardiomyopathy, dobutamine is used In patients with dilated cardiomyopathy, dobutamine is used as 24 hours infusion once a week because Dobutamine helps to increase contractility of the heart.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Dopamine is given at a dose of less than five µg/kg/min, and this dose causes peripheral vasodilation and increases myocardial contractility. Option C. Levosimendan is a calcium sensitizer used in acute care settings as a potent indicator causing systemic and coronary vasodilation. Option D. Milrinone and amrinone are phosphodiesterase inhibitors.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 25 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 15 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Acrodermatitis enteropathica is associated with which of these classical forms of dermatitis in children?", "options": [{"label": "A", "text": "Scalp dermatitis", "correct": false}, {"label": "B", "text": "Periorbital dermatitis", "correct": false}, {"label": "C", "text": "Periumbilical dermatitis", "correct": false}, {"label": "D", "text": "Peri orificial dermatitis", "correct": true}], "correct_answer": "D. Peri orificial dermatitis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Peri orificial dermatitis Acrodermatitis enteropathica is an autosomal recessive disorder associated with defective intestinal absorption of zinc. It is associated with alopecia, dermatitis, and diarrhea. Classical dermatitis seen in acrodermatitis enteropathica is Peri or artificial dermatitis, classically present around the mouth and perineum.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A Mother brought her 6-month-old baby girl to the OPD due to the rash as shown in the picture for the last 7 days. The mother also complained that the rash gets worse in the sunlight. On further examination, oral ulcers were present in the buccal mucosa. On investigation, there was a presence of anti-ds DNA Ab. &amp; ANA Ab. Which among these is the specific diagnosis of the baby’s condition?", "options": [{"label": "A", "text": "Oligoarthritis", "correct": false}, {"label": "B", "text": "Systemic Lupus Erythematosus", "correct": true}, {"label": "C", "text": "Drug-induced lupus", "correct": false}, {"label": "D", "text": "Subacute Cutaneous Lupus", "correct": false}], "correct_answer": "B. Systemic Lupus Erythematosus", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882695328-QTDK005002IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Systemic Lupus Erythematosus Here, the diagnosis is SLE ( Systemic Lupus Erythematosus). It is an autoimmune disorder characterized by inflammation of connective tissues and blood vessels resulting in multisystem involvement.</p>\n<p><strong>Highyeild:</strong></p><p>The hallmark of SLE is the presence of antinuclear antibodies (ANA). Childhood SLE is usually more severe than in adults. Diagnosis of SLE is done by Systemic Lupus International Collaborating Clinics (SLICC) criteria:- SLICC Classification Criteria for SLE Requirements: ≥ 4 criteria (at least 1 clinical and 1 laboratory criteria) OR biopsy-proven lupus nephritis with positive ANA or anti-dsDNA Clinical criteria Acute cutaneous lupus Chronic cutaneous lupus Oral or nasal ulcers Non-scarring alopecia Arthritis Serositis Renal involvement Neurologic involvement Hemolytic anemia Leukopenia Thrombocytopenia (&lt;100,000/cu mm³) Immunologic criteria Antinuclear antibody (ANA Anti-dsDNA Anti-Smith Antiphospholipid antibody Low complement (C3,C4,CH50) Direct Coombs' test (do not count in presence of hemolytic anemia) The Malar rash is pathognomic of SLE . It involves cheeks, bridge of nose and lower eyelids but spares the nasolabial folds. Oral ulcerations may involve the buccal mucosa or palate and are usually painless. Some children may have prominent frontal alopecia.Arthritis is generally mild &amp; non-erosive. Renal involvement is a dreaded complication of SLE &amp; one of the commonest Causes of mortality in children. Lupus Nephritis is conventionally classified as follows: CLASS 1: Minimal Mesangial; CLASS 2: Mesangial Proliferative; CLASS 3: Focal Proliferative; CLASS 4: Diffuse Proliferative; CLASS 5: Membranous; CLASS 6: Advanced Sclerosing.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Oligoarthritis, is the most frequent type of JIA. Four or fewer joints(usually large)are affected during the first 6 months of disease.Joint swelling is the usual complaint. More common in young girls,typically 3-5 years of age. Asymmetric involvement of knee or ankle is characteristic. Small joints of hands &amp; feet are not involved. Option: C. Drug-induced Lupus is more frequent than SLE. Anti-histone Antibody is present in this condition. Option: D. Subacute Cutaneous Lupus has the presence of Anti-Ro (SSA) Antibody which is not specific for SLE. It is associated with sjogren's syndrome , predisposes to subacute cutaneous lupus associated with decreased risk of nephritis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-month-old baby presented with features of SLE to your clinic. On examination further, Renal involvement was found to be associated with the disease &amp; was detected as one of the most dreaded complications of SLE in children. Which of the following classes of lupus nephritis mentioned below requires the most aggressive forms of therapy?", "options": [{"label": "A", "text": "Minimal Mesangial &amp; Mesangial Proliferative", "correct": false}, {"label": "B", "text": "Focal Proliferative &amp; Diffuse Proliferative", "correct": true}, {"label": "C", "text": "Membranous &amp; Advanced Sclerosing", "correct": false}, {"label": "D", "text": "Membranous &amp; Membrano proliferative", "correct": false}], "correct_answer": "B. Focal Proliferative & Diffuse Proliferative", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Focal Proliferative &amp; Diffuse Proliferative Renal involvement is a dreaded complication of SLE &amp; one of the commonest causes of mortality in children.</p>\n<p><strong>Highyeild:</strong></p><p>Lupus Nephritis is conventionally classified as follows: CLASS 1: Minimal Mesangial; CLASS 2: Mesangial Proliferative; CLASS 3: Focal Proliferative; CLASS 4: Diffuse Proliferative; CLASS 5: Membranous; CLASS 6: Advanced Sclerosing. CLASS 3 and CLASS 4 Lesions (i.e., proliferative glomerulonephritis) require the most aggressive forms of therapy. Life-threatening complications (e.g. class 4 lupus nephritis, myocarditis, encephalopathy) require the use of i/v pulses of methylprednisolone(30mg/kg/day) for 3-5 days. The use of monthly pulses of IV cyclophosphamide(500mg/m2) has improved the long-term outcome in children with severe forms of lupus nephritis. Mycophenolate mofetil is increasingly being used for the therapy of severe forms of lupus nephritis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - O ption: A. Minimal Mesangial &amp; Mesangial Proliferative are CLASS 1&amp; CLASS 2 of lupus nephritis, and these classes do not require aggressive forms of therapy. Option: C &amp; D are also classes of lupus nephritis and these classes do not require aggressive forms of treatment. Membranous Nephropathy is seen in glomerulopathy associated with colon cancer or lung cancer, renal pathology in syphilis, and hepatitis B.Membrano Proliferative is seen in renal pathology in leprosy cases.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "On the evaluation of a 6-month-old baby, he was found to be diagnosed with SLE. He also had an attack of seizures 2 months back with altered sensorium. On investigating further, the findings are as mentioned below:- Direct Coomb’s test –( +)ve WBC – 2500cells/microlitre LYMPHOCYTES- 500cells/microlitre in blood PLATELETS- 60000/microlitre of blood Low complement levels of C3 &amp; C4. According to SLICC classification criteria for SLE, all of these Immunologic criteria are correct except?", "options": [{"label": "A", "text": "Anti-ds. DNA Antibody", "correct": false}, {"label": "B", "text": "Anti-smith Antibody", "correct": false}, {"label": "C", "text": "Anti-phospholipid Antibody", "correct": false}, {"label": "D", "text": "Anti- centromere Antibody", "correct": true}], "correct_answer": "D. Anti- centromere Antibody", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Anti- centromere Antibody Anti- centromere Antibody is seen in CREST Syndrome i.e.,</p>\n<p><strong>Highyeild:</strong></p><p>C- calcinosis cutis i.e., calcium skin deposits R- Raynaud’s phenomenon( A condition in which some areas of the body feel numb &amp; cool in response to excessively cold weather.) E- esophageal dysmotility S- sclerodactyly T- telangiectasia These features are a heterogenous group of sclerodermas.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - O ption: A. Anti-ds. DNA Antibody is highly specific to SLE and usually correlates with the disease activity, nephritis &amp; vasculitis. O ption: B. Anti-smith antibodies are a marker for CNS lupus. Also, specifically for SLE, no definite correlations. O ption: C. Anti-phospholipid Antibody is useful in the diagnosis of 3 tests available: ELISAs for cardiolipin &amp; beta2 G1, Sensitive prothrombin time predisposes to clotting, fetal loss, and thrombocytopenia. Useful for detecting SLE patients. SLICC Classification Criteria for SLE Requirements: ≥ 4 criteria (at least 1 clinical and 1 laboratory criteria) OR biopsy-proven lupus nephritis with positive ANA or anti-dsDNA Clinical criteria Acute cutaneous lupus Chronic cutaneous lupus Oral or nasal ulcers Non-scarring alopecia Arthritis Serositis Renal involvement Neurologic involvement Hemolytic anemia Leukopenia Thrombocytopenia (&lt;100,000/cu mm³) Immunologic criteria Antinuclear antibody (ANA Anti-dsDNA Anti-Smith Antiphospholipid antibody Low complement (C3,C4,CH50) Direct Coombs' test (do not count in presence of hemolytic anemia)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Aarav, a 6-week-old baby was brought to a pediatric clinic by his mother due to rashes on the cheek and bridge of the nose for 5 days. The baby was also having prominent frontal alopecia and cardiac manifestations. Upon investigation, a presence of typical anti-RO antibodies was found with congenital heart block. Which is the appropriate treatment therapy for this baby's condition?", "options": [{"label": "A", "text": "Gluco-corticoids and hydroxychloroquine", "correct": true}, {"label": "B", "text": "Prednisolone and NSAIDS", "correct": false}, {"label": "C", "text": "Rituximab &amp; eculizumab", "correct": false}, {"label": "D", "text": "Azathioprine and mycophenolate mofetil", "correct": false}], "correct_answer": "A. Gluco-corticoids and hydroxychloroquine", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Gluco-corticoids and hydroxychloroquine Based on the above case scenario this baby is having SLE. so appropriate treatment for this baby is Glucocorticoids and hydroxychloroquine as it is the mainstay of therapy. It is an autoimmune disorder characterized by inflammation of connective tissues and blood vessels resulting in multi-system involvement.</p>\n<p><strong>Highyeild:</strong></p><p>The Malar rash is pathognomic of SLE. It involves the cheeks, bridge of the nose , and lower eyelids but spares the nasolabial folds. Oral ulcerations may involve the buccal mucosa or palate and are usually painless. Some children may have prominent frontal alopecia. Arthritis is generally mild &amp; non-erosive. anti-RO antibodies are present in the neonatal lupus especially those associated with congenital heart block. Renal involvement is a dreaded complication of SLE Prednisolone is started at doses of 1-2 mg/kg/day and gradually tapered over several months according to disease activity. low dose prednisolone (2.5-5 mg/day ) and hydroxychloroquine (5-6 mg/kg/day ) may need to be continued for several years depending on the clinical response.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Is prednisolone and NSAIDS, but they are not directly involved in the treatment of SLE. prednisolone is started at doses of 1-2 mg/kg/day and gradually tapered over several months according to disease activity. arthritis usually responds to NSAIDs. Option: C. Is rituximab &amp; eculizumab . rituximab is a monoclonal antibody to CD 20 &amp; has been found effective in situations like lupus nephritis, myocarditis, and encephalopathy. monoclonal antibodies like rituximab &amp; eculizumab that deplete most B cells and are used to treat non-malignant hematological disorders like ITP, Anemia, polycythemia vera. these drugs are only used when there is no response to conventional drugs. Option: D. Is azathioprine &amp; mycophenolate mofetil. these are immunosuppressive agents used in combination with glucocorticoids in severe skin lesions and organ involvement. they help to reduce the dose &amp; toxicity of glucocorticoids.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 32-year-old woman brings her child to the pediatric OPD for evaluation of a hypercoagulative state along with venous &amp; arterial thrombosis. On taking a history of the child, the doctor found out that he also had h/o DVT and features of livedo reticularis. Upon investigation, the laboratory findings are as follows: Prothrombin time(PT) – 12sec Partial thromboplastin time(PTT) - &gt;35 SEC Platelets- 1,00,000/microlitre. Which of the following antibodies is not useful in making a diagnosis in this condition?", "options": [{"label": "A", "text": "Anti- beta2 glycoprotein 1antibodies(Igm &amp;IgG)", "correct": false}, {"label": "B", "text": "Lupus anticoagulant", "correct": false}, {"label": "C", "text": "Anti- beta2 microglobulin antibody", "correct": true}, {"label": "D", "text": "Anti-cardiolipin antibody(IgM &amp; IgG)", "correct": false}], "correct_answer": "C. Anti- beta2 microglobulin antibody", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Anti- beta2 microglobulin antibody The given clinical history of a woman with a hypercoagulable state along with arterial &amp; venous thrombosis and also with a h/o DVT , livedo reticularis , and thrombocytopenia suggests a diagnosis of Antiphospholipid syndrome(APS). Anti-beta2 microglobulin antibody is not useful in diagnosing this condition. It is found in SLE patients &amp; is important in the lymphocytotoxic reaction of sera from patients with multiple myeloma, and lymphoma.</p>\n<p><strong>Highyeild:</strong></p><p>For the diagnosis of Antiphospholipid syndrome, a typical coagulation profile (normal prothrombin and partial thromboplastin time) and high titers of one or more of the following three antibodies should be demonstrated along with at least one clinical symptom of thrombosis : Anti- beta2 glycoprotein 1 antibodies (IgM &amp; IgM) – OPTION (A) Lupus Anticoagulant (LA) –most specific - OPTION (B) Anti-cardiolipin antibodies(IgM &amp; IgG) – OPTION (D)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year-old baby presented with an erythematous rash over the dorsal aspect of MCP &amp; PIP joints. The baby faces difficulty in standing and walking due to proximal muscle weakness. EMG shows evidence of Myopathy. The following finding was noted on examination as shown in image. What is the most probable diagnosis?", "options": [{"label": "A", "text": "SLE", "correct": false}, {"label": "B", "text": "Dermatomyositis", "correct": true}, {"label": "C", "text": "Polymyositis", "correct": false}, {"label": "D", "text": "DLE", "correct": false}], "correct_answer": "B. Dermatomyositis", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1690955786527-QTDK005007IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Dermatomyositis In this patient most probable diagnosis is Dermatomyositis. Juvenile Dermatomyositis is a multisystem disease characterized by non-suppurative inflammation of striated muscle and skin and systemic vasculopathy. the Dx of JDM can be made on the bases of the following criteria : Characteristic heliotrope discoloration over upper eyelids or a scaly erythematous rash over the dorsal aspect of MCP &amp; PIP joints. ( GOTTRON’S PAPULES ) Symmetrical proximal muscle weakness An elevated level of muscle enzymes ( creatine kinase, alanine, and aspartate aminotransferase ) Electromyographic evidence of myopathy Muscle biopsy showing myonecrosis, myophagocytosis, and perifascicular atrophy</p>\n<p><strong>Highyeild:</strong></p><p>Other dermatological changes include edema over eyelids, photosensitivity, truncal rash, and calcinosis. MRI shows characteristic hyperintense signals on T 2 weighted images suggestive of muscle edema &amp; inflammation, while T 1 weighted images show fibrosis, atrophy, and fatty infiltration.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. SLE is an autoimmune disorder characterized by inflammation of connective tissues and blood vessels resulting in multisystem involvement. The Malar rash is pathognomic of SLE. It involves the cheeks, bridge of the nose, and lower eyelids but spares the nasolabial folds. Oral ulcerations may involve the buccal mucosa or palate and are usually painless. Some children may have prominent frontal alopecia. Arthritis is generally mild &amp; non-erosive. Option: C. Is Polymyositis an inflammatory myopathy most frequently associated with other autoimmune diseases. it also involved perivascular and endomysial infiltrates. unlike adults, pure polymyositis ( with no accompanying skin involvement ) is uncommon in children. Option: D. Is DLE. Discoid lesions are rare in childhood. oral ulcerations may involve buccal mucosa and palate and they are usually painless. arthritis is generally mild, always non-erosive.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following would help you to differentiate between polymyositis &amp; dermatomyositis in a patient presenting with muscle weakness and evidence of myopathy?", "options": [{"label": "A", "text": "Erythematous rash", "correct": true}, {"label": "B", "text": "Involvement of proximal muscle", "correct": false}, {"label": "C", "text": "Elevated creatine kinase &amp; alanine", "correct": false}, {"label": "D", "text": "Muscle biopsy showing perifascicular atrophy", "correct": false}], "correct_answer": "A. Erythematous rash", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Erythematous rash The presence of a Scaly, erythematous rash helps in differentiating between two conditions as it is only seen in dermatomyositis. Juvenile dermatomyositis is a multisystem disease characterized by non-suppurative inflammation of striated muscle and skin and systemic vasculopathy. the Dx of JDM can be made on the bases of the following criteria : Characteristic heliotrope discoloration over upper eyelids or a scaly erythematous rash over the dorsal aspect of MCP &amp; PIP joints. ( GOTTRON'S PAPULES )</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Symmetrical proximal muscle weakness Option: C. An elevated level of muscle enzymes ( creatine kinase, alanine, and aspartate aminotransferase ) Electromyographic evidence of myopathy Option: D. Muscle biopsy showing myonecrosis, myophagocytosis and perifascicular atrophy Pure polymyositis is very uncommon in children and presents with no accompanying skin involvement. Thus rash is not present in polymyositis patients.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A Pediatrician has diagnosed Dermatomyositis in a 3-yr. old baby with complaints of proximal myalgia, truncal rash &amp; edema over the eyelids. The presence of which of these signs would be pathognomonic of this condition?", "options": [{"label": "A", "text": "Gottron’s sign", "correct": false}, {"label": "B", "text": "V-Sign", "correct": false}, {"label": "C", "text": "Gottron’s papules", "correct": true}, {"label": "D", "text": "Shawl sign", "correct": false}], "correct_answer": "C. Gottron’s papules", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Gottron’s papules The presence of Gottron’s papules is Pathognomonic of Dermatomyositis. They are erythematous to violaceous papules that occur symmetrically over the dorsal aspects of metacarpophalangeal &amp; proximal interphalangeal joints.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Gottron's sign, on the other hand, is erythematous rash over dorsal aspects of joints such as the knuckles, elbows, knees, and ankles. Option B. V-Sign is confluent macular erythema over the lower anterior neck and upper anterior chest. Option D. Shawl sign is the confluent macular erythema over the upper back and lateral aspect of arms. All of these signs are present in Dermatomyositis, but Gottron's papules &amp; heliotrope rash are pathognomonic.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-Year-old girl presented with muscle weakness and pain over her shoulders. On examination, the rash shown in the image was noted. Positive titers of which of the following antibodies are associated with her condition?", "options": [{"label": "A", "text": "Anti-Jo 1 Antibody", "correct": true}, {"label": "B", "text": "Anti- SRP Antibody", "correct": false}, {"label": "C", "text": "Anti-Mi-1 Antibody", "correct": false}, {"label": "D", "text": "Anti- PM-Scl Antibody", "correct": false}], "correct_answer": "A. Anti-Jo 1 Antibody", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882695428-QTDK005010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Anti-Jo 1 Antibody The given clinical scenario and findings of Gottron’s papules in the image as shown are suggestive of Dermatomyositis.</p>\n<p><strong>Highyeild:</strong></p><p>Positive titers of Anti- Jo 1 Antibody (OPTION A) are associated with interstitial lung disease, arthritis, and scaly, erythematous rashes in patients with dermatomyositis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - O ption: B. Anti- SRP( anti- signal recognition protein) Antibody is associated with severe myositis. O ption: C. Anti- Mi-1 Antibody is not associated with dermatomyositis but instead Anti- Mi-2 Antibody is highly specific to dermatomyositis. O ption: D. Anti- PM- Scl Antibody is associated with overlapping myositis and scleroderma. Other autoantibodies seen in dermatomyositis are:- Anti- p155/140 or anti-transcription intermediary factor(TIF)- 1gamma – seen in cancer-associated myositis. Anti-MDA5 (anti-CADM 140) IS Associated with rapidly progressive lung disease and cutaneous ulcers.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-yr. the old boy along with his mother came to the OPD with complaints of edema &amp; rash over the upper eyelids associated with photosensitivity. On MRI, T1W Shows fibrosis &amp; fatty infiltration, and T2W shows hyperintense signals suggestive of muscle edema &amp; inflammation. On evaluating all the above findings, the doctor confirmed it to be a case of Dermatomyositis. What should be the appropriate treatment given to the boy in this case?", "options": [{"label": "A", "text": "Treatment with pulse IV cyclophosphamide(500mg/m2) monthly", "correct": false}, {"label": "B", "text": "Treatment with methotrexate (15-25mg/m2/week) given s/c or orally daily for 5 days", "correct": false}, {"label": "C", "text": "Treatment with pulse IV Methylprednisolone (30mg/kg/day) for 3-5 days followed by gradual tapering", "correct": true}, {"label": "D", "text": "Treatment with rituximab, a CD 20 monoclonal antibody 500mg twice at 2 weeks intervals", "correct": false}], "correct_answer": "C. Treatment with pulse IV Methylprednisolone (30mg/kg/day) for 3-5 days followed by gradual tapering", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Treatment with pulse IV Methylprednisolone (30mg/kg/day) for 3-5 days followed by gradual tapering Based on the above case scenario, the diagnosis is Dermatomyositis in a boy.</p>\n<p><strong>Highyeild:</strong></p><p>Based on the above case scenario, the diagnosis is Dermatomyositis in a boy. The appropriate treatment therapy given to the baby boy in this condition is with pulse IV methylprednisolone (30mg/kg/day) for 3-5 days followed by gradual tapering doses of oral prednisolone(1.5- 2mg/kg/day). Rapid tapering of steroids may result in disease relapse. Long-term prognosis is excellent, if treatment is started early.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - O ption: A. Treatment with pulse IV cyclophosphamide(500mg/m2)monthly has considerably improved the long-term outcome in children with severe forms of lupus nephritis present in SLE. O ption: B. Treatment with methotrexate (15-25mg/m2/week) given s/c or orally daily for 5 days forms the mainstay of maintenance therapy in patients with dermatomyositis. However, it is used only if iv methylprednisolone is ineffective. The usual duration of therapy is 18-24 months. Option: D. Treatment with rituximab , a CD20 monoclonal antibody given 500mg twice at 2 weeks intervals is found to be effective in situations like lupus nephritis, myocarditis, and encephalopathy in SLE patients.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Samar, a 6-yr. the old boy presents to you with hardening of skin and numbness of fingers &amp; toes on exposure to cold environments. He also complains of muscle weakness and difficulty while walking &amp; standing for a long duration. Investigations done reveal the following findings: ANA- Ab. positive Anti- Scl 70 Ab. positive Elevated creatine kinase &amp;alanine Muscle biopsy showing perifascicular atrophy. What is the likely diagnosis of this condition?", "options": [{"label": "A", "text": "Systemic scleroderma", "correct": false}, {"label": "B", "text": "Overlap syndromes", "correct": true}, {"label": "C", "text": "Localized sclerodermas", "correct": false}, {"label": "D", "text": "Pseudosclerodermas", "correct": false}], "correct_answer": "B. Overlap syndromes", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Overlap syndromes The above-given case has features of both systemic scleroderma &amp; dermatomyositis, which points towards a diagnosis of Overlap syndromes.</p>\n<p><strong>Highyeild:</strong></p><p>This is a multisystemic overlap syndrome characterized by features of rheumatoid arthritis, systemic scleroderma, SLE, and dermatomyositis occurring in conjunction with high titers of anti-ribonucleoprotein(RNP) ANTIBODIES( SPECIFIC FOR U1 RNP). Nephritis is less common and less severe than SLE. Oral weekly Methotrexate is a useful therapeutic option.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - O ption: A. SYSTEMIC SCLERODERMA also known as systemic sclerosis, refers to the hardening of the It can be classified as follows: Systemic scleroderma (eg. Diffuse cutaneous, limited cutaneous) Overlap syndromes Option: C. Localized scleroderma(e.g morphea, linear scleroderma, eosinophilic fasciitis) Chemically induced scleroderma(e.g with polyvinyl chloride, pentazocine, bleomycin) Option: D. Pseudosclerodermas(e.g phenylketonuria, scleredema, progeria, and porphyria cutanea tarda) DIFFUSE CUTANEOUS SYSTEMIC SCLERODERMA is usually associated with visceral involvement including the GIT, heart, lungs &amp; kidneys. Fetomaternal graft vs host reactions is also involved. The onset of the disease is insidious &amp; difficult to recognize in the initial stages. The child presents with skin tightening(edema, atrophy, and acrosclerosis), Raynaud’s phenomenon(blanching, cyanosis &amp;erythema), soft tissue contractures, arthralgias, myalgias &amp; dysphagia, and dyspnea.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Akshara, a school-going girl presents with complaints of thickening skin over her hands &amp; fingers, dysphagia, and dyspnea. She also gives a history suggestive of Raynaud’s phenomenon. On physical examination, it revealed reduced mobility. The presence of which of the following antibodies will confirm her diagnosis?", "options": [{"label": "A", "text": "Anti-nuclear Antibody", "correct": false}, {"label": "B", "text": "Anti-DNA topoisomerase I Antibody", "correct": true}, {"label": "C", "text": "Anti-centromere Antibody", "correct": false}, {"label": "D", "text": "Anti-cardiolipin Antibody", "correct": false}], "correct_answer": "B. Anti-DNA topoisomerase I Antibody", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Anti-DNA topoisomerase I Antibody The clinical features of skin thickening over hands &amp; fingers, dysphagia, and dyspnea along with h/o Raynaud’s phenomenon associated with reduced mobility in a girl is leading to a diagnosis of Diffuse cutaneous systemic scleroderma/sclerosis.</p>\n<p><strong>Highyeild:</strong></p><p>The presence of Anti- DNA topoisomerase I Antibody (scl-70) OPTION (B) &amp; Anti- RNA polymerase III Antibodies will confirm the diagnosis of Diffuse cutaneous systemic scleroderma.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - O ption: A. The presence of Anti-nuclear Antibody (ANA) is positive in most cases of systemic sclerosis. The absence of this antibody indicates an alternate diagnosis. O ption: C. The presence of ANTI-CENTROMERE Antibody (ACA) is suggestive of a diagnosis of limited cutaneous systemic scleroderma. It is also considered a most specific test for CREST syndrome in systemic sclerodermas(C – Calcinosis cutis, R- Raynaud’s phenomenon, E- Esophageal dysmotility, S- Sclerodactyly, T- Telangiectasia ) Option: D. The presence of Anticardiolipin Antibody is seen in SLE and APLA(Antiphospholipid antibody) syndromes.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A mid-school-going boy came with complaints of dysphagia, dyspnea, and heartburn with skin tightening leading to atrophy. His mother, who was accompanying him gave a h/o fetomaternal reaction which occurred in the past during her pregnancy. Based on all these findings, the boy is likely to be suffering from systemic sclerosis along with multi-organ involvement. Which of the following is not a component of CREST syndrome?", "options": [{"label": "A", "text": "CALCINOSIS CUTIS", "correct": false}, {"label": "B", "text": "RAYNAUD’S PHENOMENON", "correct": false}, {"label": "C", "text": "ESOPHAGEAL DYSMOTILITY", "correct": false}, {"label": "D", "text": "RENAL FAILURE", "correct": true}], "correct_answer": "D. RENAL FAILURE", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>RENAL FAILURE RENAL FAILURE is not a component of CREST syndrome. CREST syndrome is seen in limited cutaneous systemic sclerosis and consists of the following: Option: A. Calcinosis cutis Option: B. Raynaud’s phenomenon Option: C. Esophageal dysmotility Sclerodactyly Telangiectasia SYSTEMIC SCLERODERMA also known as systemic sclerosis, refers to the hardening of the It can be classified as follows: Systemic scleroderma (eg. Diffuse cutaneous, limited cutaneous) Overlap syndromes Localized scleroderma(e.g morphea, linear scleroderma, eosinophilic fasciitis) Chemically induced scleroderma(e.g with polyvinyl chloride, pentazocine, bleomycin) Pseudosclerodermas(e.g phenylketonuria, scleredema, progeria, and porphyria cutanea tarda) The child presents with skin tightening(edema, atrophy , and acrosclerosis), Raynaud’s phenomenon(blanching, cyanosis &amp;erythema), soft tissue contractures, arthralgias, myalgias &amp; dysphagia, and dyspnea. The presence of ANTI-CENTROMERE Antibody (ACA) is suggestive of a diagnosis of limited cutaneous systemic scleroderma.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A young girl was diagnosed with systemic sclerosis 6 months back. The girl presented with arthralgias, myalgias, dysphagia, and nail-bed abnormalities. On history taking, the girl revealed that the disease was not recognized initially, but later became significant. The findings upon investigation are: B.P – 180/90 mm hg R.R – 20/min Proteinuria present (indicating renal involvement) Which of the following drugs are implicated in systemic sclerosis of this young girl? Penicillamine Colchicine Cyclophosphamide Nifedipine Bleomycin Select the correct answer from given below code:", "options": [{"label": "A", "text": "1,2 &amp; 3", "correct": true}, {"label": "B", "text": "1,2 &amp; 5", "correct": false}, {"label": "C", "text": "2,3 &amp; 5", "correct": false}, {"label": "D", "text": "3,4 &amp; 5", "correct": false}], "correct_answer": "A. 1,2 & 3", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,2 &amp; 3 The young girl has been diagnosed with systemic sclerosis and so based on the above clinical features &amp; investigations, the drugs implicated in this condition are: penicillamine and colchicine produces beneficial results in some patients, especially if used early in the course of the disease. Cyclophosphamide(monthly pulses IV), FOLLOWED BY MAINTENANCE DAILY by Azathioprine or weekly Methotrexate. It can be life-saving in patients with interstitial lung disease. Nifedipine is useful in the management of Raynaud’s phenomenon, while Enalapril is used in c ontrolling BP and stabilization of renal function. So, all these drugs are implicated in the management of systemic sclerosis in this young girl. Bleomycin implicated causes chemically induced scleroderma and not systemic sclerosis. The onset of the disease is insidious &amp; difficult to recognize in the initial stages. The child presents with skin tightening(edema, atrophy, and acrosclerosis), Raynaud’s phenomenon(blanching, cyanosis &amp; erythema), soft tissue contractures, arthralgias, myalgias &amp; dysphagia, and dyspnea. An onset of hypertension &amp; proteinuria usually indicates Renal involvement.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 25 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 15 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 29-week preterm baby was born by normal vaginal delivery and, on day 2, had 1 episode of tonic seizures. The USG of the brain is shown below. What is the diagnosis", "options": [{"label": "A", "text": "INTRAVENTRICULAR HAEMORRHAGE (IVH)", "correct": true}, {"label": "B", "text": "Choroid plexus cyst", "correct": false}, {"label": "C", "text": "Hydrocephalus", "correct": false}, {"label": "D", "text": "Periventricular leukomalacia (PVL)", "correct": false}], "correct_answer": "A. INTRAVENTRICULAR HAEMORRHAGE (IVH)", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884704617-QTDK050001IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>INTRAVENTRICULAR HAEMORRHAGE (IVH) This is an Ultrasonogram (USG) cranium (brain) showing hyperintensity within the ventricles, possibly suggesting bleeding inside the ventricles. Intracranial haemorrhage often involves the ventricles (intraventricular haemorrhage, IVH ) of premature infants delivered spontaneously without apparent trauma. Therefore, screening preterm newborn babies at and post/discharge for intracranial (intraventricular) haemorrhage development is imperative.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old child presents to the pediatric emergency department with status epilepticus, and the resident on duty promptly secured the airway and maintained oxygenation and perfusion. But the seizures were not controlled even after administering lorazepam and phenytoin. What should be done next?", "options": [{"label": "A", "text": "Phenobarbitone", "correct": false}, {"label": "B", "text": "Levetiracetam", "correct": false}, {"label": "C", "text": "Valproate", "correct": true}, {"label": "D", "text": "Intubation", "correct": false}], "correct_answer": "C. Valproate", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Valproate</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-year-old child, while participating in a walking competition, suddenly stops in her tracks and stares vacantly ahead. Her mother notices that she makes some abnormal mouth movements during this period. She regains her awareness within the 30-second bell and continues her activity. What can be the provisional diagnosis?", "options": [{"label": "A", "text": "Absence seizure", "correct": true}, {"label": "B", "text": "Complex partial seizure", "correct": false}, {"label": "C", "text": "West syndrome", "correct": false}, {"label": "D", "text": "Myoclonic seizure", "correct": false}], "correct_answer": "A. Absence seizure", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Absence seizure Absence seizures are characterised by the following: Staring episodes lasting up to a few No postictal confusion. Precipitated by hyperventilation 3Hz spike and wave (dome) pattern. Valproate and Lamotrigine are the first-line drugs used in absence seizures. Other options have different presentations.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An adolescent presents to your OPD with convulsions during the early morning hours. On history taking, the mother tells you that he has been preparing for exams since last week without sleeping properly at night. On Electroencephalogram (EEG), slow wave discharges with 4-6 spike waves are seen. What is the diagnosis?", "options": [{"label": "A", "text": "Absence seizure", "correct": false}, {"label": "B", "text": "Complex partial seizure", "correct": false}, {"label": "C", "text": "West syndrome", "correct": false}, {"label": "D", "text": "Juvenile Myoclonic epilepsy", "correct": true}], "correct_answer": "D. Juvenile Myoclonic epilepsy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Juvenile Myoclonic epilepsy Juvenile Myoclonic epilepsy. (Janz syndrome) is characterised by: Myoclonic epilepsy. occurs during the early morning hours Electroencephalogram (EEG) shows slow wave discharges with 4-6 spike waves Usually in adolescents Due to sleep deprivation Valproate is used Gamma-aminobutyric acid type A receptor alpha1 subunit (GABRA1), Calcium-sensing receptor (CASR), and Calcium channel beta 4(CACNB4) are genes involved. Other options have different presentations.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Where is the following Electroencephalogram (EEG) seen", "options": [{"label": "A", "text": "Absence seizure", "correct": false}, {"label": "B", "text": "Complex partial seizure", "correct": false}, {"label": "C", "text": "West syndrome", "correct": true}, {"label": "D", "text": "Juvenile Myoclonic epilepsy", "correct": false}], "correct_answer": "C. West syndrome", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884704743-QTDK050005IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>West syndrome West syndrome or infantile spasms is characterised by the triad of: Epileptic spasms (salaam spells), Hyps arrhythmic Electroencephalogram (given EEG) Psychomotor retardation or regression.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Cob-web coagulum is seen in which of the following:", "options": [{"label": "A", "text": "TB meningitis", "correct": true}, {"label": "B", "text": "Bacterial meningitis", "correct": false}, {"label": "C", "text": "Viral meningitis", "correct": false}, {"label": "D", "text": "Fungal meningitis", "correct": false}], "correct_answer": "A. TB meningitis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>TB meningitis Cobweb coagulum denotes the cloudy appearance seen in TB meningitis. Pleocytosis can also be seen.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "2 years old male presented in a pediatric emergency with complaints of one episode of abnormal body movement preceded by high-grade fever. This episode lasted for around 10 minutes in the form of increased tone and jerky movements of all four limbs with uprolling of Eyeballs, clenching of teeth and drooling of saliva .it was followed by unconsciousness for 20 minutes, on examination temperature – 102 degrees F and no meningeal signs present. A provisional diagnosis of febrile seizure is made. Which of the following statements are true about febrile seizures? The most common cause of provoked seizures in childhood Always associated with neurologically abnormal child A family history of febrile seizure is a risk factor Seen in the age of 6 to 60 months Select the correct answer from given below code:", "options": [{"label": "A", "text": "1,2,3", "correct": false}, {"label": "B", "text": "1,2,4", "correct": false}, {"label": "C", "text": "2,3,4", "correct": false}, {"label": "D", "text": "1,3,4", "correct": true}], "correct_answer": "D. 1,3,4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,3,4 Febrile seizure The most common cause of provoked seizures in childhood Definition Ages of 6 to 60 months Temperature of 38°C (100.4°F) or higher Absence of CNS infection or any metabolic imbalance Absence of history of prior afebrile seizures Types of febrile seizure Simple febrile seizure (typical) Complex febrile seizure (atypical) Generalised, usually tonic-clonic and Focal Lasting for &gt; 15 min and &gt;=15 min Not recurrent within a 24-hr period. Recurs within 24 hr. Risk Factors for Recurrence of Febrile Seizures Major Minor Age &lt;1 year Family history of febrile seizures Duration of fever &lt;24 hrs Family history of epilepsy Fever (38-39 C) Complex febrile seizures Daycare Male sex Lower serum sodium at the time of presentation</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A three-year-old female has been admitted to a pediatric emergency with a provisional diagnosis of febrile seizure. The apprehensive parents asked the resident doctor about the future risk of epilepsy in this patient. The risk factors of epilepsy associated with febrile seizures are? Simple Febrile seizure Complex febrile seizure Neurodevelopmental abnormality Family history of epilepsy Select the correct answer from given below code:", "options": [{"label": "A", "text": "1,2,3", "correct": false}, {"label": "B", "text": "1,2,4", "correct": false}, {"label": "C", "text": "2,3,4", "correct": true}, {"label": "D", "text": "1,3,4", "correct": false}], "correct_answer": "C. 2,3,4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2,3,4 Febrile seizure The most common cause of provoked seizures in childhood Definition Ages of 6 to 60 months Temperature of 38°C (100.4°F) or higher Absence of CNS infection or any metabolic imbalance Absence of history of prior afebrile seizures Types of febrile seizure Simple febrile seizure (typical) Complex febrile seizure (atypical) Generalised, usually tonic-clonic and Focal Lasting for &gt; 15 min and &gt;=15 min Not recurrent within a 24-hr period. Recurs within 24 hr. Risk Factors for Occurrence of Subsequent Epilepsy After a Febrile Seizure RISK FACTOR RISK FOR SUBSEQUENT EPILEPSY Simple febrile seizure 1% Recurrent febrile seizure 4% Complex febrile seizure(&gt;1 5 min duration or recurrent within 24 hrs) 6% Fever &lt; 1hr before seizure 11% Family history of epilepsy 18% Complex febrile seizure( focal) 29% Neurodevelopmental abnormalities 33%</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A final year MBBS student is given a case of febrile seizure in an exam. The examiner asked him about the indications of Lumber puncture in a patient with Febrile seizure. The indications are? Focal neurological deficit in Child Family history of complex febrile seizure Sick looking child 6 to 12 months old with absent vaccination history Select the correct answer from given below code:", "options": [{"label": "A", "text": "1,2,3", "correct": false}, {"label": "B", "text": "1,2,4", "correct": false}, {"label": "C", "text": "2,3,4", "correct": false}, {"label": "D", "text": "1,3,4", "correct": true}], "correct_answer": "D. 1,3,4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,3,4 Indications of lumbar puncture in febrile seizure &lt; 6 mo of age who present with fever and seizure The child is ill-appearing, If there are clinical signs or symptoms of concern. Child 6-12 mo of age who is deficient in Haemophilus influenzae type b and Is unknown. A lumbar puncture is an option in children pretreated with antibiotics.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old male presented in a pediatric emergency with complaints of one episode of abnormal body movement preceded by high-grade fever .child also has a previous history of a similar episode of seizures around 5 months back. On examination, the temperature was 100 degrees F. No meningeal signs are present. The child is active and playful. What are the indications for starting intermittent antiepileptic prophylaxis in febrile seizure cases?", "options": [{"label": "A", "text": "Past episode of febrile seizure", "correct": false}, {"label": "B", "text": "Neurologically abnormal child", "correct": false}, {"label": "C", "text": "Family history of epilepsy", "correct": false}, {"label": "D", "text": "Recurrent episode of febrile seizure(&gt;3episodes in 6 months)", "correct": true}], "correct_answer": "D. Recurrent episode of febrile seizure(>3episodes in 6 months)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Recurrent episode of febrile seizure(&gt;3episodes in 6 months) The most common cause of provoked seizures in childhood Definition Ages of 6 to 60 mo Temperature of 38°C (100.4°F) or higher Absence of CNS infection or any metabolic imbalance Absence of history of prior afebrile seizures Types of febrile seizure Simple febrile seizure (typical) Complex febrile seizure (atypical) Generalised, usually tonic-clonic and Focal Lasting for &gt; 15 min and &gt;=15 min Not recurrent within a 24-hr period. Recurs within 24 hr. Risk Factors for Occurrence of Subsequent Epilepsy After a Febrile Seizure RISK FACTOR RISK FOR SUBSEQUENT EPILEPSY Simple febrile seizure 1% Recurrent febrile seizure 4% Complex febrile seizure(&gt;1 5 min duration or recurrent within 24 hrs) 6% Fever &lt; 1hr before seizure 11% Family history of epilepsy 18% Complex febrile seizure( focal) 29% Neurodevelopmental abnormalities 33% Indications of intermittent Prophylaxis during febrile episodes are: Oral diazepam/clobazam indicated when there is a history of &gt;=3 episodes in the last 6 months;&gt;=4 episodes in the last 1-year present</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4-year-old male presented in a pediatric emergency with complaints of one episode of abnormal body movement preceded by high-grade fever. The child also has a previous history of similar episodes of seizures around 2 months and 5 months back, respectively. On examination, the temperature was 100 degrees F. No meningeal signs are present. The child is active and playful. The resident doctor decided to add antiepileptic to this child. Which of the following antiepileptics can be used for prophylaxis of febrile seizure? Diazepam Valproate Phenoparbotone Clobazam Select the correct answer from given below code:", "options": [{"label": "A", "text": "1,2", "correct": false}, {"label": "B", "text": "2,3", "correct": false}, {"label": "C", "text": "1,4", "correct": true}, {"label": "D", "text": "2,4", "correct": false}], "correct_answer": "C. 1,4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,4 Febrile seizure The most common cause of provoked seizures in childhood Definition Ages of 6 to 60 mo Temperature of 38°C (100.4°F) or higher Absence of CNS infection or any metabolic imbalance Absence of history of prior afebrile seizures Types of febrile seizure Simple febrile seizure (typical) Complex febrile seizure (atypical) Generalised, usually tonic-clonic and Focal Lasting for &gt; 15 min and &gt;=15 min Not recurrent within a 24-hr period. Recurs within 24 hr. Risk Factors for Occurrence of Subsequent Epilepsy After a Febrile Seizure RISK FACTOR RISK FOR SUBSEQUENT EPILEPSY Simple febrile seizure 1% Recurrent febrile seizure 4% Complex febrile seizure(&gt;1 5 min duration or recurrent within 24 hrs) 6% Fever &lt; 1hr before seizure 11% Family history of epilepsy 18% Complex febrile seizure( focal) 29% Neurodevelopmental abnormalities 33% Indication of intermittent Prophylaxis during febrile episodes are: Oral diazepam/clobazam indicated when the history of &gt;=3 episodes in the last 6 months;&gt;=4 episodes in the last 1-year present</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-month-old infant presented in a paediatric emergency with complaints of fever, vomiting, and decreased oral acceptance for the past 5 days.on examination, Anterior fontanelle bulging activity decreased, and the cry was shrill. A provisional diagnosis of acute bacterial meningitis is made in this patient. The most common cause of meningitis in this patient is?", "options": [{"label": "A", "text": "Streptococcus pneumonia", "correct": true}, {"label": "B", "text": "Neisseria meningitides", "correct": false}, {"label": "C", "text": "Hemophilus influenza", "correct": false}, {"label": "D", "text": "E. coli", "correct": false}], "correct_answer": "A. Streptococcus pneumonia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Streptococcus pneumonia Acute bacterial meningitis etiology In india Across world &lt;1 month Acinetobacter&gt; E coli, klebsiella Group B streptococci(streptococcus agelectie)&gt;E coli&gt;Listeria monocytogenes 1 month -2 yrs Streptococcus pneumonie Nesseria meningitidis H influenza 2-18 yrs N meningitidis (mc in 11-18 yrs) Streptococcus pneumonie</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old male presented in OPD with complaints of fever, headache and vomiting for the past 3 days. On examination, vitals were normal. Meningeal signs are positive. A lumbar puncture in this patient will reveal the following CSF findings? Cobweb formation Decreased glucose Elevated proteins Leukocytes in CSF increased Select the correct answer from the given below code:", "options": [{"label": "A", "text": "1,2,3", "correct": false}, {"label": "B", "text": "1,3,4", "correct": false}, {"label": "C", "text": "1,2,4", "correct": false}, {"label": "D", "text": "2,3,4", "correct": true}], "correct_answer": "D. 2,3,4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2,3,4 CSF findings Opening pressure(mm H20) Leukocytes(mm3 Protein(mg/dl Glucose (mg/dl) Others Normal &lt;28 &lt;5, all lymphocytes 20-45 &gt;50(&gt;755 of serum glucose Pyogenic meningitis Elevated 100-10000 mainly polymorphs Elevated 100-500 40(&lt;50% of serum glucose) Organism seen on gram stain and isolated in culture</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Cobweb formation is seen in tubercular meningitis, but as mentioned above, patient history is short so it cannot be tubercular meningitis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 13-year-old female presented in pediatric OPD complaining of dropping objects in the morning just after awakening. It gets precipitated by sleep deprivation. A similar history is present in the elder sister. EEG done was suggestive of epileptic spikes. What is the treatment of choice for such epilepsy?", "options": [{"label": "A", "text": "Reassurance", "correct": false}, {"label": "B", "text": "Valproate", "correct": true}, {"label": "C", "text": "Carbamazepine", "correct": false}, {"label": "D", "text": "Ethosuximide", "correct": false}], "correct_answer": "B. Valproate", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Valproate Points in favour of juvenile myoclonic epilepsy are: Complaints of dropping objects in the morning just after awakening. Precipitated by sleep deprivation. A similar history is present in the elder sister. EEG done was suggestive of epileptic spikes Juvenile myoclonic epilepsy (Janz syndrome) Age of onset Early adolescence (12-16yrs) Characterised by Bilateral myoclonus Most frequently in the morning Drop things Consciousness is preserved Aggravating factors Sleep deprivation and photic stimulation EEG Generalised 4- to 5-Hz polyspike-and-slow-wave discharges Family history Positive in most cases Treatment Responds well Valproate is the drug of choice Given life long Other effective drugs are topiramate,lamotrigine</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option C. it is the drug of choice in partial seizure Option D. IT IS Drug of choice in absence seizures</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7-year-old male presented in a pediatric emergency in a state of seizure. The resident doctor in the emergency administered 1 dose of injection lorazepam to the patient. But seizures persist. What is the next drug to be administered to this patient?", "options": [{"label": "A", "text": "Phenytoin", "correct": true}, {"label": "B", "text": "Valproate", "correct": false}, {"label": "C", "text": "Lorazepam", "correct": false}, {"label": "D", "text": "Levetiracetam", "correct": false}], "correct_answer": "A. Phenytoin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Phenytoin As the patient presented in pediatric emergency in state of seizures-so it's a case of status epilepticus . As the patient has received 1 dose of lorazepam and still seizure is persisting so now 2nd dose of benzodiazepine is needed.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 25 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 11 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Which of the following syndromes is not associated with short stature?", "options": [{"label": "A", "text": "Down’s syndrome", "correct": false}, {"label": "B", "text": "Seckel syndrome", "correct": false}, {"label": "C", "text": "Prader Willi syndrome", "correct": false}, {"label": "D", "text": "Klinefelter syndrome", "correct": true}], "correct_answer": "D. Klinefelter syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Klinefelter syndrome Some chromosomal disorders (genetic syndromes) are associated with short stature in children. Some important syndromes that are associated with short stature in children include Down’s syndrome, Turner syndrome, Prader Willi Syndrome, Seckel syndrome, and Silver Russell syndrome.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A short-stature child with normal growth velocity, delayed puberty, and delayed bone age is most likely to have which of these types of short stature?", "options": [{"label": "A", "text": "Familial (Genetic)", "correct": false}, {"label": "B", "text": "Constitutional delay", "correct": true}, {"label": "C", "text": "Chromosomal disorders", "correct": false}, {"label": "D", "text": "Endocrine disorders", "correct": false}], "correct_answer": "B. Constitutional delay", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Constitutional delay A short-stature child with normal growth velocity is most likely to have a physiologically short stature; this category includes familial (genetic) short stature and constitutional delay. Delayed bone age (compared to chronological age) and delayed puberty are most consistent with constitutional delay. In familial short stature, bone age equals chronological age and puberty usually appears on time.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which type of short stature is most consistent with a history of normal length at birth, an at-par growth till 1st year followed by a deceleration; and subsequently normal height velocity growing just below and parallel to the 3rd centile; and an accelerated but delayed pubertal growth spurt", "options": [{"label": "A", "text": "Familial short stature", "correct": false}, {"label": "B", "text": "Endocrine short stature", "correct": false}, {"label": "C", "text": "Small for gestational age (SGA)", "correct": false}, {"label": "D", "text": "Constitutional delay", "correct": true}], "correct_answer": "D. Constitutional delay", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Constitutional delay In a constitutional growth delay, children are of normal length at birth and grow normally till about 6-12 months, after which a deceleration in height velocity results in height and weight falling below the 3rd centile. Subsequently, a normal height velocity is resumed, with these children growing just below and parallel to the 3rd centile with a normal height velocity. The pubertal growth spurt is delayed and the final height of these children is usually normal.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Choose the correct option for the following graphs regarding the growth of different tissues and organs at the respective time of age.", "options": [{"label": "A", "text": "A is brain growth", "correct": true}, {"label": "B", "text": "B is gonadal growth", "correct": false}, {"label": "C", "text": "C is somatic growth", "correct": false}, {"label": "D", "text": "D is lymphoid growth", "correct": false}], "correct_answer": "A. A is brain growth", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884183894-QTDK041006IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>A is brain growth Different tissues grow at different rates: Brain growth: brain enlarges rapidly during the latter months of fetal life and early months of postnatal life. At birth, head size is 65 to 70% of the expected head size in adults. It reaches 90%adult head size by the age of 2yrs. Somatic growth: skeletal growth is a continuous process occurring during whole childhood and adolescence. It is steady until the pubertal growth spurt when it accelerates and subsequently slows considerably. The skeleton is mature once the epiphysis or growth plate at end of the long bone fuses to the shaft or diaphysis. This occurs by about 18yrs in girls and 20 to 21yrs in boys. The degree of skeletal maturity closely correlates with the degree of sexual maturity Lymphoid growth: lymphoid tissue is more notable during mid-childhood. During this period, lymphoid tissue is overgrown and its mass may appear to be larger than that of fully mature adults. A sign of accelerated lymphoid tissue growth is the frequent finding of large tonsils and palpable lymph nodes in normal children between 4 and to 8yrs age. Gonadal growth: it is dormant during childhood and becomes conspicuous during pubescence</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Match the following milestones according to age group Select the correct answer from the given below code:", "options": [{"label": "A", "text": "1-B,2-D,3-E,4-C", "correct": false}, {"label": "B", "text": "1-A,2-B,3-C,4-D", "correct": false}, {"label": "C", "text": "1-D,2-A,3-C,4-B", "correct": false}, {"label": "D", "text": "1-D,2-C,3-A,4-B", "correct": true}], "correct_answer": "D. 1-D,2-C,3-A,4-B", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1690968189784-QTDK041008IMG1.JPG", "https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1689445101207-QTDK041008IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1-D,2-C,3-A,4-B Unidextrous grasp = at 6 months ; bi-dextrous grasp at 4months Immature pincer grasp at 9 months , mature pincer grasp at 12months Handedness at 3rd year ( 24 to 36 months) Creeps upstairs at 15 months</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Concerned parents bring their child to your OPD with complaints of short height and the mother is worried about the delayed puberty of the child. You notice that both the parents are having average normal heights. You evaluate the patient and conclude that actual age is more than bone age. What can be the diagnosis?", "options": [{"label": "A", "text": "Constitutional delay", "correct": true}, {"label": "B", "text": "Genetic short stature", "correct": false}, {"label": "C", "text": "Proportionate short stature", "correct": false}, {"label": "D", "text": "Pathological short stature", "correct": false}], "correct_answer": "A. Constitutional delay", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Constitutional delay Constitutional delay is the most common type of short stature . Here puberty is delayed and the bone age is less than the actual age. The final height is normal and the parent’s height is not a cause.</p>\n<p><strong>Highyeild:</strong></p><p>In genetic short stature, the final height remains short always and the parents are also short. There is no delayed puberty. Pathological short stature is where the growth velocity is decreased and it can be disproportionate or proportionate. Proportionate short stature is a type of pathological short stature where the US: LS ratio matches with age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You evaluate a child with short stature and find out that the average growth velocity is decreased and the ratio of US: LS is less than expected with a short trunk and long extremities. Which of the following diseases can not be ruled out?", "options": [{"label": "A", "text": "Rickets", "correct": false}, {"label": "B", "text": "Achondroplasia", "correct": false}, {"label": "C", "text": "Congenital hypothyroidism", "correct": false}, {"label": "D", "text": "Spondyloepiphyseal dysplasia", "correct": true}], "correct_answer": "D. Spondyloepiphyseal dysplasia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Spondyloepiphyseal dysplasia In pathological short stature, the Average growth velocity is decreased while in physiological short stature, there is normal growth velocity. The ratio of US: LS less than expected is a finding seen in disproportionate short stature more so in an advanced form where the trunk is short. Spondyloepiphyseal dysplasia is an example of this and hence cannot be ruled out. All the other options are examples of infantile forms of disproportionate short stature.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Match the following. Select the correct answer from the given below code:", "options": [{"label": "A", "text": "1d, 2c, 3a, 4b", "correct": true}, {"label": "B", "text": "1d, 2a, 3b, 4c", "correct": false}, {"label": "C", "text": "1a, 2c, 3b, 4d", "correct": false}, {"label": "D", "text": "1d, 2b, 3a, 4c", "correct": false}], "correct_answer": "A. 1d, 2c, 3a, 4b", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1690968081613-QTDK041012IMG1.JPG", "https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1689445144732-QTDK041012IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1d, 2c, 3a, 4b Short Stature is defined as the standing height of a child &lt; 2SD or &lt; 3rd percentile for age and gender. Bone age = Actual age in genetic short stature which is part of physiological short stature. In Constitutional delay, the actual age is more than the bone age, and puberty is delayed. Rickets is an example of disproportionate short stature where the trunk is long but the extremities are short. Chromosomal disorders like Down syndrome, Turner syndrome, and Noonan syndrome are all examples of proportionate short stature.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Growth hormone therapy is useful in which of the following:", "options": [{"label": "A", "text": "GH deficiency", "correct": false}, {"label": "B", "text": "Noonan syndrome", "correct": false}, {"label": "C", "text": "Turner syndrome", "correct": false}, {"label": "D", "text": "All of above", "correct": true}], "correct_answer": "D. All of above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of above Growth Hormone Therapy may be useful in : Growth Hormone GH deficiency Turners syndrome Noonan Syndrome Prader Willi Syndrome Short stature due to CKD Chronic Kidney Disease Small For Gestational Age SGA where no catch-up growth by 3yrs Idiopathic Short Stature.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child presents to your OPD for a general checkup and you notice that the height of the child is less than the 3rd percentile for age and gender and that the growth velocity of the child is decreased but the US: LS ratio matches with age. Which of the following cannot be a differential diagnosis?", "options": [{"label": "A", "text": "Down syndrome", "correct": false}, {"label": "B", "text": "Celiac disease", "correct": false}, {"label": "C", "text": "Rickets", "correct": true}, {"label": "D", "text": "GH deficiency", "correct": false}], "correct_answer": "C. Rickets", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rickets Short Stature is defined as the standing height of a child &lt; 2SD or &lt; 3rd percentile for age and gender.</p>\n<p><strong>Highyeild:</strong></p><p>The growth velocity of the child is decreased implying that the child is having pathological short stature. Upper segment(US): Lower segment(LS) ratio matches with age implying that it is proportionate short stature. Except for rickets, all others are examples of proportionate short stature. Rickets is an example of disproportionate short stature</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Identify the growth pattern from the following image:", "options": [{"label": "A", "text": "Constitutional delay", "correct": true}, {"label": "B", "text": "Disproportionate short stature", "correct": false}, {"label": "C", "text": "Proportionate short stature", "correct": false}, {"label": "D", "text": "Genetic short stature", "correct": false}], "correct_answer": "A. Constitutional delay", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1725358698371-photos-1725270865784-QTDK041016IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Constitutional delay As we can see in this image the final height, in this case, is normal hence we can rule out genetic short stature where the final height is always short.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B &amp; C are causes of pathological short stature where the growth velocity is decreased.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 21 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 14 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "An 8-month-old infant is brought to the clinic for vaccinations. Parents informed the doctor that the BCG vaccine was missed during birth. Which of the following is true about the vaccine?", "options": [{"label": "A", "text": "It is a live attenuated vaccine.", "correct": true}, {"label": "B", "text": "The strain used in India is the Copenhagen strain", "correct": false}, {"label": "C", "text": "The vaccine needs reconstitution", "correct": false}, {"label": "D", "text": "The vaccine is heat and light stable", "correct": false}], "correct_answer": "A. It is a live attenuated vaccine.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>It is a live attenuated vaccine. BCG vaccine can be given up to 1 year of age (Catch up) Live attenuated vaccines include OPV, BCG, Yellow fever, MMR, and Varicella. Derived from Copenhagen strain which is also known as Danish 1331 . Produced at Guindy, Tamil Nadu The vaccine is stable in lyophilised form at 2-8˚ C for one year but loses potency rapidly when reconstituted with sterile normal saline. Available as a lyophilised powder in dark multidose vials as it is heat and light-sensitive.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You are discharging the mother and her neonate from the wards. Before discharge, the nurse gives you the BCG vaccine to administer to the baby. Which of the following is true regarding BCG administration?", "options": [{"label": "A", "text": "Given subcutaneously at the insertion of the deltoid muscle on the left shoulder", "correct": false}, {"label": "B", "text": "After reconstituting, each dose should be of 0.1 ml", "correct": true}, {"label": "C", "text": "Discard reconstituted vaccine after 24 hours", "correct": false}, {"label": "D", "text": "According to the national program, catch-up immunisation of BCG vaccine is up till 5 years", "correct": false}], "correct_answer": "B. After reconstituting, each dose should be of 0.1 ml", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>After reconstituting, each dose should be of 0.1 ml When reconstituted with normal saline, each dose is of 0.1 ml</p>\n<p><strong>Highyeild:</strong></p><p>Conventionally, BCG vaccine is administered at the insertion of the deltoid on the left shoulder for easy scar identification.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. It is given intra-dermally. Not subcutaneously. Option: C. Reconstituted vaccine should be discarded after 4 hours. Option: D. According to the national program, catch-up immunisation of BCG is up to 1 year. Although IAP suggests catching up to 5 years.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-week-old infant is brought to the hospital for regular immunisation. The nurse on duty administered a second dose of bOPV and pentavalent vaccines. Which of the following is true about OPV administration?", "options": [{"label": "A", "text": "Bivalent OPV contains OPV2 AND OPV3 strains.", "correct": false}, {"label": "B", "text": "It is a live attenuated type of vaccine", "correct": true}, {"label": "C", "text": "It is heat and light stable", "correct": false}, {"label": "D", "text": "Cold chain maintenance is not required", "correct": false}], "correct_answer": "B. It is a live attenuated type of vaccine", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>It is a live attenuated type of vaccine Examples of live attenuated vaccines are OPV, BCG, Yellow fever, MMR, and Varicella.</p>\n<p><strong>Highyeild:</strong></p><p>OPV is a live vaccine attenuated by a repeated passage in monkey kidney cell cultures and stabilised with magnesium chloride.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. OPV type 2 was eradicated in 1999. Hence bivalent OPV is used nowadays, which contains strains of OPV1 and OPV3. Option: C. The vaccine is sensitive to heat, and hence vaccine vial monitor is used Option: D. Maintaining the cold chain is necessary and is stored at 2-8˚C</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "As a medical officer at a PHC, you examine a batch of OPV. And you observe the following on the vials. What would be your next step of action?", "options": [{"label": "A", "text": "Put the vials in the lowest rack in the Ice-lined refrigerator.", "correct": false}, {"label": "B", "text": "Discard all the vials.", "correct": true}, {"label": "C", "text": "Use this batch first and complete it within 24 hours.", "correct": false}, {"label": "D", "text": "Nothing to be done, and proceed as usual.", "correct": false}], "correct_answer": "B. Discard all the vials.", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882784333-QTDK008004IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Discard all the vials. Vaccine vial monitor (WM) is a thermochromic label put on vials containing vaccines which gives a visual indication of whether the vaccine has been kept at a temperature which preserves its potency. 4 stages of VVM has been shown in the above picture. Only stages 1 and 2 are usable.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. bOPV vials are kept at the bottom of the ILR. But once cold chain is broken, vaccines cannot be re-refrigerated for use. Option: C&amp;D. Once VVM read stage 3, the vaccine cannot be used</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3.5-month infant is brought to the hospital for regular immunisation. He was administered a third dose of bOPV and pentavalent vaccines and a second dose of inactivated poliovirus vaccine. Which of the following is true about the IPV vaccine?", "options": [{"label": "A", "text": "It is administered at 6 weeks, 14 weeks and 16-24 months according to the national immunisation schedule", "correct": false}, {"label": "B", "text": "0.1 ml IM injection is given for IPV", "correct": false}, {"label": "C", "text": "Catch-up is up to 5 years", "correct": true}, {"label": "D", "text": "It is heat and light stable and does not need VVM.", "correct": false}], "correct_answer": "C. Catch-up is up to 5 years", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Catch-up is up to 5 years Catch-up period of both IPV and OPV Is up to 5 years.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. According to NIS, IPV is given at 6 and 14 weeks only Option: B. 1 ml is given intradermally, and hence it is known as fractionated IPV. Earlier, it was given 0.5 ml as IM or SC dose. Option: D. Both OPV And IPV are heat sensitive and should be stored at 2-8˚ C. VVM monitors the cold chain.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1.5-month infant is brought to the hospital for regular vaccination. He was administered a second dose of bOPV and pentavalent vaccines and the first dose of inactivated poliovirus vaccine. Which of the following is true about the Salk vaccine?", "options": [{"label": "A", "text": "The vaccine primarily induces intestinal mucosal antibodies.", "correct": false}, {"label": "B", "text": "It consists of all three types of polioviruses", "correct": true}, {"label": "C", "text": "Administered at 6,10, and 14 weeks.", "correct": false}, {"label": "D", "text": "Both A and C", "correct": false}], "correct_answer": "B. It consists of all three types of polioviruses", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>It consists of all three types of polioviruses OPV is sabin, and IPV is known as the Salk vaccine. They are named after their inventors, Jonas Salk and Albert Sabin. The trick to remember: salk/chalk cannot be eaten.</p>\n<p><strong>Highyeild:</strong></p><p>IPV consists of 40D, 8D, and 32D of poliovirus types 1,2 and 3 respectively. Whereas OPV consists of only type 1 and type 3.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. IPV primarily induces humoral immunity, while OPV primarily induces intestinal immunity. Option: C. OPV is administered at birth, 6,10,14 weeks, and 16-24 months. IPV is administered at 6 and 14 weeks only. Option: D. It would be correct if the question asked for the Sabin vaccine.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A primigravida woman comes for a regular antenatal visit. The doctor in OPD prescribes the woman to get vaccinated with the first dose of the tetanus vaccine. Which of the following is false about the tetanus vaccine?", "options": [{"label": "A", "text": "A total of two doses are recommended at least 4 weeks apart.", "correct": false}, {"label": "B", "text": "Provides active immunity to the baby.", "correct": true}, {"label": "C", "text": "Each dose of the vaccine contains 5 Lf of toxoid.", "correct": false}, {"label": "D", "text": "The vaccine is heat stable.", "correct": false}], "correct_answer": "B. Provides active immunity to the baby.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Provides active immunity to the baby. It provides passive immunity to the baby due to the transplacental passage of IgG antibodies.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Two doses of TT/Td are to be given during pregnancy. Both doses should be one month apart, and 2nd dose should be completed 4 weeks before the delivery. Only 1 TT dose is recommended if the previous pregnancy was less than 3 years back and the woman was given both TT doses during that pregnancy. Option: C &amp; D. Each dose of the vaccine contains 5 Lf of tetanus toxoid and is heat stable and remains potent for a few weeks even at 37˚C</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Anxious parents of a 4-month-old infant come to OPD demanding the administration of the MR vaccine to their child as there is a measles outbreak currently in their hometown. As a doctor, what would be your action?", "options": [{"label": "A", "text": "Explain to the parents that maternal antibodies protect infants till 2 years of age.", "correct": false}, {"label": "B", "text": "Refuse and explain to them to get the child vaccinated at 9 months of age.", "correct": false}, {"label": "C", "text": "Refuse and explain to them to get the child vaccinated at 6 months of age.", "correct": true}, {"label": "D", "text": "Administer the vaccine.", "correct": false}], "correct_answer": "C. Refuse and explain to them to get the child vaccinated at 6 months of age.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Refuse and explain to them to get the child vaccinated at 6 months of age. However, during outbreaks, the vaccine may be given at 6 months with a repeat dose at 15 months.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Infants are protected from measles by maternal antibodies till 6-9 months of age. Therefore, the MR vaccine is administered at 9 months of age. Option: B. The child cannot be sent back and asked to get vaccinated at 9 months of age as there is an outbreak in their community, and hence vaccine can be administered as early as 6 months of age. Option: D. If vaccinated earlier than 9 months, interference by maternal antibodies cause primary vaccine failure in 15% of cases</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "During your visit to a community health centre, you visit the vaccination storage room and notice different types of storage units. Identify the vaccines or diluent stored in the bottommost basket of the following cold chain equipment:", "options": [{"label": "A", "text": "Diluents", "correct": false}, {"label": "B", "text": "OPV", "correct": true}, {"label": "C", "text": "BCG (before reconstitution)", "correct": false}, {"label": "D", "text": "Pentavalent vaccine", "correct": false}], "correct_answer": "B. OPV", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882784813-QTDK008010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>OPV The image given is of ice lined refrigerator OPV and above it, Measles vaccines are always kept on the bottom most basket</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A. Diluents are always kept on the top basket Option C. BCG after reconstitution is heat and light labile and hence is kept in lower baskets. But before reconstitution it can be stored in higher baskets Option D. Pentavalent vaccine is stored in higher baskets as it is freeze sensitive.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-week infant is brought to the clinic for regular immunisation. However, during a power outage for more than 8 hours, the medical officer doubts whether the vaccines are helpful. Which of the following vaccine is heat sensitive?", "options": [{"label": "A", "text": "BCG", "correct": false}, {"label": "B", "text": "OPV", "correct": false}, {"label": "C", "text": "Measles", "correct": false}, {"label": "D", "text": "All of the above", "correct": true}], "correct_answer": "D. All of the above", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>All of the above Option A, B &amp; C. Heat and light sensitive vaccines contain BCG, OPV and Measles vaccines. Vaccines sensitive to freezing are Hepatitis B, DPT, DT, and TT. Therefore, always store ‘T Series’ vaccines (DPT, DT, TT) and Hepatitis B vaccines between +2 Deg C and + 8 Deg C. BCG and Measles vaccine before reconstitution is less heat sensitive than after reconstitution.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 14-week-old infant is brought to the district hospital for regular immunisation. The nurse administered the Pneumococcal vaccine along with other routine vaccines. Which of the following states has the PCV vaccine not yet been introduced?", "options": [{"label": "A", "text": "Himachal Pradesh", "correct": false}, {"label": "B", "text": "Maharashtra", "correct": true}, {"label": "C", "text": "Uttar Pradesh", "correct": false}, {"label": "D", "text": "Bihar", "correct": false}], "correct_answer": "B. Maharashtra", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Maharashtra Option A, C &amp; D. PCV has been introduced in the UIP in phased wise manner starting from June 2017 onwards in select districts of Bihar, Himachal Pradesh and Uttar Pradesh. However, based on the government announcement, five states were included for PCV: Himachal Pradesh, Bihar, Uttar Pradesh, Rajasthan and Madhya Pradesh. But the last two states were not included in the National Operational Guidelines, Introduction of Pneumococcal Conjugate Vaccine 2017. Conjugate PCV is included in UIP and is given at 6 weeks, 14 weeks and 9 months. 0.5 ml IM injection is given at the anterolateral thigh or deltoid.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 9-month-old female infant is brought to the clinic for routine immunisation. She was administered MR, JE and PCV. Which of the following is true regarding the PCV vaccine?", "options": [{"label": "A", "text": "Pneumococcal Conjugate vaccine (PCV13 and PCV 23) is included in the national immunisation program.", "correct": false}, {"label": "B", "text": "Dose of PCV is 0.5 ml Intramuscular", "correct": true}, {"label": "C", "text": "It is given at 14 weeks and 9 months", "correct": false}, {"label": "D", "text": "It is stored in a deep freezer.", "correct": false}], "correct_answer": "B. Dose of PCV is 0.5 ml Intramuscular", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Dose of PCV is 0.5 ml Intramuscular 0.5 ml is given via intramuscular route at the anterolateral thigh or deltoid.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Pneumococcal conjugate (PCV13 and PCV10) is used in national program. Another type of PCV vaccine is Pneumococcal polysaccharide (PPSV23) which IAP recommends in the high-risk category Option C. It is given at 6 and 14 weeks and 9 months of age Option D. It is stored at 2-8˚C and not to be frozen.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A neonate was injected with the BCG vaccine following which the child had excessive crying, local ulceration, fever. After how many weeks does it heal by scarring, as shown below?", "options": [{"label": "A", "text": "1 week", "correct": false}, {"label": "B", "text": "6-12 weeks", "correct": true}, {"label": "C", "text": "6-12 months", "correct": false}, {"label": "D", "text": "4 weeks", "correct": false}], "correct_answer": "B. 6-12 weeks", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882785047-QTDK008014IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>6-12 weeks</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. By 1 week, papule is formed Option: C. The ulcer heals by scarring by 6-12 weeks and not months. Option: D. The papule ulcerates after 4 weeks.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4 months old infant from Haryana is brought to OPD with complaints of excessive crying and refusal to breastfeed. He was administered his routine vaccination 2 weeks ago. USG abdomen shows the following image: Which could be responsible for this condition?", "options": [{"label": "A", "text": "PCV vaccine", "correct": false}, {"label": "B", "text": "Pentavalent vaccine", "correct": false}, {"label": "C", "text": "Rotavac", "correct": true}, {"label": "D", "text": "Japanese encephalitis vaccine", "correct": false}], "correct_answer": "C. Rotavac", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882785252-QTDK008015IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rotavac The image in the question shows a target sign/ donut sign which indicates intussusception of the bowel.</p>\n<p><strong>Highyeild:</strong></p><p>A 14 weeks vaccination schedule includes OPV, Pentavalent, Rota, IPV, and PCV. As the child is from Haryana, an oral rotavirus vaccine is recommended (5 drops of rotavac), but PCV is not included in the national program for the state of Haryana. Adverse reactions of oral Rotavirus vaccine are fever, diarrhoea, vomiting, and rarely intussusception.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Adverse reactions of PCV include fever, local pain, soreness, and malaise. Option: B. Adverse reactions of DTwP include pain, swelling, fever, rare encephalopathy, seizures, and hypotonic hyporesponsive episodes. Adverse effects of Hepatitis B and Hib include fever, rash, soreness, redness, and fatigue. Option: D . Adverse reactions of the JE vaccine include fever, malaise, and hypersensitivity.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 24 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 7 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 7-year-old boy was brought to the pediatric OPD with complaints of multiple painless swellings in the neck and supraclavicular area, fever, and night sweats. FNAC from the swelling showed the following pathology: Which of the following is the most likely diagnosis?", "options": [{"label": "A", "text": "Ewing Sarcoma", "correct": false}, {"label": "B", "text": "Classical Hodgkin Lymphoma", "correct": true}, {"label": "C", "text": "Nodular lymphocytic predominant Hodgkin Lymphoma", "correct": false}, {"label": "D", "text": "Burkitt Lymphoma", "correct": false}], "correct_answer": "B. Classical Hodgkin Lymphoma", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1712556046477-WhatsAppImage2024-04-06at14.35.12_2572024c.jpg"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Classical Hodgkin Lymphoma Reed Sternberg(RS)cell , a binucleated cell with a bilobed nucleus and two large nucleoli giving an owl eye appearance to the cells. They are a hallmark of classical Hodgkin lymphoma. Nodular sclerosis type of Hodgkin's lymphoma can be associated with the lacunar cell.</p>\n<p><strong>Highyeild:</strong></p><p>The signs and symptoms of Hodgkin lymphoma include cervical and supraclavicular lymphadenopathy along with “ B” symptoms such as fever, night sweats, and unexplained loss of &gt;10% of body weight.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A . Ewing sarcoma occurs most often in the second decade, and arises from flat bones such as the pelvis, and diaphysis of long bones. A common site of metastasis is the lungs. Option: C . Nodular lymphocytic predominant Hodgkin Lymphoma is characterized by large cells with multilobed nuclei referred to as popcorn cells. These patients are generally asymptomatic and present with localized non-bulky mediastinal disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15-year-old boy comes to the clinic with complaints of swelling in the neck region, fever, night sweats, and weight loss. Ultrasonography of the neck confirmed cervical lymphadenopathy. Excision biopsy of the lymph nodes showed Reed-Sternberg cells. Which of the following is true about this condition?", "options": [{"label": "A", "text": "Epstein-Barr virus (EBV) infection increases the risk", "correct": true}, {"label": "B", "text": "Autoimmune conditions decrease the risk", "correct": false}, {"label": "C", "text": "Most commonly seen in &lt; 5 years of age", "correct": false}, {"label": "D", "text": "It is a lymphoreticular neoplasm primarily of the T-cell lineage", "correct": false}], "correct_answer": "A. Epstein-Barr virus (EBV) infection increases the risk", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Epstein-Barr virus (EBV) infection increases the risk Reed-Sternberg cells are most commonly seen in classical Hodgkin lymphoma.</p>\n<p><strong>Highyeild:</strong></p><p>EBV infection increases the risk of Hodgkin Lymphoma . EBV viral DNA can be found in Hodgkin Reed Sternberg cells suggesting monoclonal proliferation of the cells following infection. EBV can also be associated with infectious mononucleosis , Hodgkin's lymphoma, Nasopharyngeal carcinoma, etc.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Immune deficiency and autoimmune disorders like rheumatoid arthritis , SLE, Sarcoidosis, and ITP increase the risk of Hodgkin Lymphoma. Option: C. Hodgkin Lymphoma shows bimodal age of distribution, 15-44 years and then 55-75 years. It is very uncommon before adolescence. Option: D . Hodgkin lymphoma is a lymphoreticular neoplasm primarily of B-cell lineage.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15-year-old boy with complaints of fever, night sweats, and swelling in the neck region was diagnosed to have Hodgkin Lymphoma. He started chemotherapy with an ABVD regimen (Adriamycin, Bleomycin, Vinblastine, Dacarbazine). Which of the following histological subtypes of Classical Hodgkin Lymphoma has the worst prognosis?", "options": [{"label": "A", "text": "Nodular Sclerosis", "correct": false}, {"label": "B", "text": "Mixed cellularity", "correct": false}, {"label": "C", "text": "Lymphocyte rich", "correct": false}, {"label": "D", "text": "Lymphocyte depletion", "correct": true}], "correct_answer": "D. Lymphocyte depletion", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Lymphocyte depletion Out of all the other histological subtypes , lymphocyte depletion has the worst prognosis and it occurs in 5-15% of cases. It can also be associated with HIV.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Nodular sclerosis type occurs in 20-50% of cases and has a very good prognosis. Option: B. Mixed cellularity type is seen most commonly in developing countries and in children (20-40%) and has a good prognosis. Option: C . Lymphocyte-rich type occurs in 10-15% of cases and has an excellent prognosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 14-year-old girl presents to the clinic with complaints of fever, night sweats and recent loosening of clothes. On examination, she had cervical lymphadenopathy which was painless. Excision biopsy from the lymph node showed the following: On immunophenotyping, which of the following will be positive in this case?", "options": [{"label": "A", "text": "CD15 and CD20", "correct": false}, {"label": "B", "text": "CD20 and CD45", "correct": false}, {"label": "C", "text": "CD15 and CD30", "correct": true}, {"label": "D", "text": "CD20 and CD30", "correct": false}], "correct_answer": "C. CD15 and CD30", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>CD15 and CD30 The clinical scenario shows Reed Sternberg cells which are present most commonly in Classical Hodgkin Lymphoma .</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A, B &amp; C: On immunophenotyping, classic subtypes are positive for CD15 and CD30 and maybe positive for CD2 0 whereas nodular lymphocytic predominant Hodgkin Lymphoma is negative for CD15 and CD30 but positive for CD20 and CD45 . NLPHL has the best prognosis. Option D. This option is also correct but is very less common. If there were no CD15 and CD30 in the options, this could be marked as the correct answer.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 16-year-old girl was brought to the clinic with complaints of fever, night sweats, and significant weight loss. She had a past infection with the Ebstein-Barr virus. On examination, she has cervical and axillary lymphadenopathy. Which of the following is the most commonly used therapy regimen?", "options": [{"label": "A", "text": "ABVD (Adriamycin, Bleomycin, Vinblastine, Dacarbazine)", "correct": false}, {"label": "B", "text": "MOPP (Mechlorethamine, Vincristine, Procarbazine, Prednisone)", "correct": false}, {"label": "C", "text": "CHOP (Cyclophosphamide, Doxorubicin, Vincristine, Prednisone)", "correct": false}, {"label": "D", "text": "Both A &amp; B", "correct": true}], "correct_answer": "D. Both A & B", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Both A &amp; B The given clinical scenario gives us a diagnosis of Hodgkin's lymphoma which has a very good response to chemotherapy. Most children are treated with combination chemotherapy alone or in combination with radiotherapy. Superior efficacy and absence of significant toxicity have made ABVD the preferred regimen for Hodgkin's lymphoma. Chemotherapy regimens used to treat Hodgkin Lymphoma are: ABVD Adriamycin (doxorubicin) Bleomycin Vinblastine Dacarbazine Concerns about the ABVD regimen include cardiomyopathy and pulmonary fibrosis. Other common regimens include: BEACOPP - Bleomycin,Etoposide (VP-16),Adriamycin (doxorubicin),Cyclophosphamide, Oncovin (vincristine),Procarbazine, Prednisone. MOPP - Mechlorethamine, Vincristine, Procarbazine, Prednisone</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: C. CHOP (Cyclophosphamide, Doxorubicin, Vincristine, Prednisone) is used in the treatment of Non-Hodgkin Lymphoma</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 16-year-old girl presents to pediatric OPD with complaints of unexplained weight loss, fever, and swelling in the axilla. On examination, she has cervical and axillary lymphadenopathy. An excisional biopsy of the lymph nodes was sent for immunophenotyping and came positive for CD15 and CD30. A PET-CT scan was ordered and additionally showed the involvement of the lungs and liver. What is the stage of the disease according to the modified Ann Arbor staging system?", "options": [{"label": "A", "text": "Stage I", "correct": false}, {"label": "B", "text": "Stage II", "correct": false}, {"label": "C", "text": "Stage III", "correct": false}, {"label": "D", "text": "Stage IV", "correct": true}], "correct_answer": "D. Stage IV", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Stage IV Diffuse involvement of one or more extra-lymphatic sites, not by direct extension, with or without associated lymph node involvement is staged as Stage IV. It is the highest stage Hodgkin's lymphoma with the worst prognosis.</p>\n<p><strong>Highyeild:</strong></p><p>Stage IV can be further divided into Stage IV A and Stage IV B based on clinical symptoms. If there are no “B” symptoms, it is staged as IV A, and if there is the presence of at least one of the following. It is staged as IV B: Unexplained weight loss &gt;10% baseline during 6 months before staging Recurrent unexplained fever &gt;38˚C Recurrent night sweats</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A . Stage I: Single lymph node region or one extra lymphatic site by direct extension Option: B. Stage II: Two or more lymph node regions on the same side of the diaphragm Option: C . Stage III: Lymph node involvement on both sides of the diaphragm.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-year-old African boy was brought to the clinic with complaints of abdominal lump, abdominal pain, and following facial lesion as shown in the image below. Biopsy from the jaw lesion is positive for CD10, CD19, and CD20. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Nodular Lymphocytic Predominant Hodgkin Lymphoma", "correct": false}, {"label": "B", "text": "Burkitt Lymphoma", "correct": true}, {"label": "C", "text": "Lymphocyte-rich Hodgkin Lymphoma", "correct": false}, {"label": "D", "text": "Anaplastic large cell lymphoma", "correct": false}], "correct_answer": "B. Burkitt Lymphoma", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Burkitt Lymphoma The clinical symptoms, with jaw mass and immunophenotype of CD10, CD19, CD20 positive point toward a diagnosis of an Endemic form of Burkitt Lymphoma.</p>\n<p><strong>Highyeild:</strong></p><p>Burkitt Lymphoma is the most common type of Non-Hodgkin Lymphoma . Hodgkin lymphoma rarely shows extra-nodal involvement. Burkitt's lymphoma is associated with c-myc mutation . Immunophenotype in Burkitt Lymphoma shows positive CD10, CD19, and CD20.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. NLPHL is a type of Hodgkin Lymphoma characterized by lymph node involvement and immunophenotype of CD20 and CD45 positive. Option: C. Lymphocyte-rich Hodgkin Lymphoma is a subtype of classic Hodgkin lymphoma where lymph node involvement is seen and is positive for CD15 and CD30. Option: D. Anaplastic large cell lymphoma (almost 10% of Non-Hodgkin Lymphoma) is a type of Non-Hodgkin lymphoma where CD30 is positive. Organs involved are lymph nodes, skin, bones, etc.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 17 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 23 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Predisposing factors in a child with recurrent Urinary Tract Infection (UTI) are: a) Male sex b) Below 6 months c) Above 6 months d) Vesicoureteral reflux VUR- severe e) Vesicoureteral reflex VUR- mild f) Malnourished child Select the correct answer from given below code:-", "options": [{"label": "A", "text": "a,c,d,e", "correct": false}, {"label": "B", "text": "B,d,f", "correct": true}, {"label": "C", "text": "a,b,d", "correct": false}, {"label": "D", "text": "b,e only", "correct": false}], "correct_answer": "B. B,d,f", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>B,d,f Predisposing factors for recurrent Urinary Tract Infection (UTI) include female sex, age below 6 months, obstructive uropathy, severe vesicoureteric reflux (VUR), voiding dysfunction, constipation, and repeated catheterization, e.g. for neurogenic bladder. Children with malnutrition and those receiving immunosuppressive therapy are also susceptible.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2yr old child presented to the hospital with fever, abdominal pain, and increased frequency of urine. Relevant investigations were carried out and were diagnosed to have Urinary tract infections. USG was done at that time. Since it was the 1st episode of febrile UTI, further imaging studies were planned. When/ After how long will you advise the parents to review for the (Dimercapto succinic acid) DMSA scan?", "options": [{"label": "A", "text": "1 to 2 months", "correct": false}, {"label": "B", "text": "2 to 3 months", "correct": false}, {"label": "C", "text": "3 to 4 months", "correct": true}, {"label": "D", "text": "4 to 6 months", "correct": false}], "correct_answer": "C. 3 to 4 months", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>3 to 4 months In a 2yr old child with the first episode of febrile UTI, Ultrasound, (Dimercapto succinic acid) DMSA scan, and (Micturating Cysto-urethrogram) MCU (If ultrasound or DMSA scan is abnormal) is to be done.</p>\n<p><strong>Highyeild:</strong></p><p>The timeline for the imaging is as follows: USG- during UTI MCU-2-4 weeks after UTI DMSA- 3-4months after UTI Note: Below 1 year: Ultrasound, MCU 1-5 years: Ultrasound, DMSA scan, MCU (If ultrasound or DMSA scan is abnormal) Above 5 years: Ultrasound If ultrasound abnormal: micturating cystourethrogram MCU and DMSA scan.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4 yr old child presented to you with complaints of fever, backache, fatigue, jaundice, and dark urine. On examination you notice splenomegaly. On further investigating the case, you diagnose it to be a G6PD deficiency. The mother gives a history of a child taking drugs for UTI prophylaxis. What could be the offending agent? Cephalexin Cefadroxil Cotrimoxazole Nitrofurantoin Select the correct answer from given below code:-", "options": [{"label": "A", "text": "a,b", "correct": false}, {"label": "B", "text": "b,c", "correct": false}, {"label": "C", "text": "c,d", "correct": true}, {"label": "D", "text": "a,d", "correct": false}], "correct_answer": "C. c,d", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>c,d G6PD deficiency, an X-linked disorder with full expression in affected males, is the most common red cell enzyme deficiency. Variants of the deficiency have been identified, which vary in antioxidant reserve and enzyme levels. Hallmarks of a hemolytic crisis are pallor, icterus, hemoglobinuria, and splenomegaly. Plasma haptoglobin and hemopexin are low.</p>\n<p><strong>Highyeild:</strong></p><p>The diagnosis of G6PD deficiency is based on family history, clinical &amp; laboratory features, and exposure to oxidants prior to the hemolytic event. Confirmation of the diagnosis is by quantitative enzyme assay or molecular gene analysis. Management consists of supportive care for the acute crisis (hydration, transfusions, if needed, and monitoring) along with folic acid supplements. Counseling to avoid exposure to oxidant drugs is imperative Drugs that cause oxidant stres s and hemolysis in patients with G6PD deficiency : Sulfonamides: Sulfamethoxazole, Cotrimoxazole Antimalarials: Primaquine, quinine Analgesics: Aspirin, non-steroidal anti-inflammatory drugs, phenazopyridine (pyridium) Others: Nitrofurantoin, dapsone, methylene blue, rasburicase, toluidine blue, nalidixic acid, furazolidone, and quinidine.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3yr old child evaluated for febrile UTI was suspected to have VUR. On micturating cystourethrogram MCU, it was seen that VUR extended up to the kidney with mild dilatation of the ureter and renal pelvis. What is the grade of VUR in this child?", "options": [{"label": "A", "text": "Grade 2", "correct": false}, {"label": "B", "text": "Grade 3", "correct": true}, {"label": "C", "text": "Grade 4", "correct": false}, {"label": "D", "text": "Grade 5", "correct": false}], "correct_answer": "B. Grade 3", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Grade 3 VUR severity is graded using the International Reflux Study (IRS) Classification of I-V and is based on the appearance of the urinary tract on a contrast voiding cystourethrogram (VCUG). The higher the VUR grade the greater the likelihood of renal injury. VUR severity is an indirect indication of the degree of abnormality of the ureterovesical junction. Grade I: VUR into a nondilated ureter. Grade II: VUR into the upper collecting system without dilation. Grade III: VUR into a dilated ureter and/or blunting of the calyceal fornices. Grade IV: VUR into a grossly dilated ureter. Grade V: massive VUR, with significant ureteral dilation and tortuosity and loss of the papillary impression.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In a 4 year child with recurrent UTI, diagnosed with grade 3 VUR, what would be the management?", "options": [{"label": "A", "text": "Wait and watch", "correct": false}, {"label": "B", "text": "Antibiotic prophylaxis till 1 yr old", "correct": false}, {"label": "C", "text": "Antibiotic prophylaxis till 5 yrs old", "correct": true}, {"label": "D", "text": "Surgical correction", "correct": false}], "correct_answer": "C. Antibiotic prophylaxis till 5 yrs old", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Antibiotic prophylaxis till 5 yrs old In the management of vesicoureteral reflux, medical therapy is based on the principle that VUR resolves over time, and prophylactic antibiotics maintain urine sterility and prevent infections while awaiting spontaneous resolution.</p>\n<p><strong>Highyeild:</strong></p><p>Reflux takes longer to resolve, if associated with bowel bladder dysfunction or If high-grade reflux is present; such patients require prolonged prophylaxis . Surgical correction of VUR Is indicated, if breakthrough infections occur, since significant parenchymal injury may occur with pyelonephritis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Parents of a 4yr child with grade 4 VUR Vesicoureteral reflux, reflux nephropathy, hypertension, and End Stage Renal Disease, come to you anxious about their 2yr old developing the same condition. What would you advise them?", "options": [{"label": "A", "text": "Not to worry, since it has no genetic preponderance", "correct": false}, {"label": "B", "text": "Wait and watch, for symptoms", "correct": false}, {"label": "C", "text": "Ultrasound sonography test (USG)", "correct": true}, {"label": "D", "text": "Micturating cystourethrogram (MCU)", "correct": false}], "correct_answer": "C. Ultrasound sonography test (USG)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ultrasound sonography test (USG) VUR is inherited in an autosomal dominant manner with incomplete penetrance; almost one-third of siblings and offspring of patients show Vesicoureteral reflux (VUR). In the Screening of Siblings and Offspring, Ultrasonography is recommended to screen for the presence of reflux; further imaging is to be performed, if ultrasonography is abnormal.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3yr old boy presents with urinary incontinence &amp; occasional afebrile UTIs. A renal USG reveals moderate b/l hydroureteronephrosis. What is the next most appropriate step in the management of this patient?", "options": [{"label": "A", "text": "Diagnosing it as enuresis and treating it with timed voiding and laxatives", "correct": false}, {"label": "B", "text": "Repeat renal ultrasound in 6 months.", "correct": false}, {"label": "C", "text": "Voiding cystourethrogram.", "correct": true}, {"label": "D", "text": "CT KUB", "correct": false}], "correct_answer": "C. Voiding cystourethrogram.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Voiding cystourethrogram. The symptoms in the child are suggestive of Distal urinary tract obstruction and Posterior Urethral Valve is an important cause of distal urinary tract obstruction in boys.</p>\n<p><strong>Highyeild:</strong></p><p>The usual presenting features are dribbling/ abnormal urinary stream, palpable bladder, and recurrent UTI. The diagnosis is confirmed on MCU, which shows dilated posterior urethra and valves at its junction with the anterior urethra. The bladder is enlarged and may show diverticula and trabeculations; secondary vesicoureteral reflux is common.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2 and half-year-old male child presented to the OPD with complaints of dribbling, abnormal urinary stream, palpable bladder, and recurrent UTI. The child also has Vesicoureteral reflux (VUR) and on further radiological examination (MCU) the following appearance is seen. What is the likely diagnosis?", "options": [{"label": "A", "text": "Urethral Stricture", "correct": false}, {"label": "B", "text": "Posterior urethral valve", "correct": true}, {"label": "C", "text": "Ureterocele", "correct": false}, {"label": "D", "text": "Normal variant or Functional dysfunction", "correct": false}], "correct_answer": "B. Posterior urethral valve", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884843476-QTDK054010IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Posterior urethral valve The posterior urethral valve is the important cause of distal urinary tract obstruction in boys. The diagnosis is confirmed on Micturating cystourethrogram (MCU), which shows dilated posterior urethra and valves at its junction with the anterior urethra. The bladder is enlarged and may show diverticula and trabeculations; secondary vesicoureteral reflux is common.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Match the following investigations with the conditions they are used in to reach the diagnosis:- Select the correct answer from the given below code:", "options": [{"label": "A", "text": "1-c, 2-a, 3-b, 4-d", "correct": false}, {"label": "B", "text": "1-d, 2-a, 3-b, 4-c", "correct": false}, {"label": "C", "text": "1-d, 2-b, 3-a, 4-c", "correct": true}, {"label": "D", "text": "1-c, 2-b, 3-a, 4-d", "correct": false}], "correct_answer": "C. 1-d, 2-b, 3-a, 4-c", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1689445466447-QTDK054012IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1-d, 2-b, 3-a, 4-c TUBULAR FUNCTION OF KIDNEY/GFR - DTPA STRUCTURE OF KIDNEY/ SCARRING - DMSA RENAL CYST - ULTRASOUND VUR, PUV - MCU</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following statements regarding vesicoureteric reflux in children are correct except", "options": [{"label": "A", "text": "Most Grade I and II VURs resolve spontaneously", "correct": false}, {"label": "B", "text": "Micturating cystourethrogram (MCU) is the imaging modality of choice", "correct": false}, {"label": "C", "text": "Familial tendency", "correct": false}, {"label": "D", "text": "Grade II VUR in a 6-month-old child should undergo immediate surgical correction", "correct": true}], "correct_answer": "D. Grade II VUR in a 6-month-old child should undergo immediate surgical correction", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Grade II VUR in a 6-month-old child should undergo immediate surgical correction Vesicoureteral reflux (VUR) is an abnormality of the urinary tract associated with the retrograde flow of urine from the urinary bladder into the upper urinary tract. It is one of the predominant causes of recurrent UTI and reflux nephropathy in children. There are strong reports of its familial tendency and AD mode of inheritance. VUR is graded based on the degree of dilatation and renal collecting system morphology;</p>\n<p><strong>Highyeild:</strong></p><p>Grade I reflux does not reach the renal pelvis; Grade II reflux reaches the renal pelvis with no dilatation of the collecting system; Grade III reflux involves mild to moderate dilatation of the ureter and moderate dilatation of the collecting system with normal or minimally deformed fornices; Grade IV reflux involves moderate dilatation of the ureter and moderate dilatation of the collecting system with blunt fornices; Grade V reflux involves gross dilatation of the ureter, marked dilatation of the collecting system; and intraparenchymal reflux. Treatment of VUR aims to preserve kidney function by minimizing the risk of pyelonephritis; management options either involve keeping children on antimicrobial prophylaxis and watchful expectancy for VUR to resolve spontaneously or immediate surgery. Faster resolution of VUR can be expected in children &lt; 1 year at presentation and those with a lower grade of reflux (grade I–III).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is commonly known to recur after renal transplants?", "options": [{"label": "A", "text": "Membranous GN", "correct": false}, {"label": "B", "text": "Lupus nephritis", "correct": false}, {"label": "C", "text": "C3 glomerulopathy", "correct": true}, {"label": "D", "text": "Pauci-immune glomerulonephritis", "correct": false}], "correct_answer": "C. C3 glomerulopathy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>C3 glomerulopathy Recurrence of C3 glomerulopathy is common after renal transplantation, which frequently results in graft loss.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following is the investigation of choice for a child suspected of having a posterior urethral valve?", "options": [{"label": "A", "text": "Ultrasound", "correct": false}, {"label": "B", "text": "X-ray pelvis", "correct": false}, {"label": "C", "text": "Dimercapto succinic acid(DMSA)", "correct": false}, {"label": "D", "text": "Micturating cystourethrogram(MCU)", "correct": true}], "correct_answer": "D. Micturating cystourethrogram(MCU)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Micturating cystourethrogram(MCU) The posterior urethral valve is one of the most common causes of lower urinary tract (bladder outlet) obstruction and an important cause of renal insufficiency in male children. The disorder can be screened prenatally through an ultrasound (USG). Prenatal ultrasound sonography test USG showing dilated posterior urethra and dilated bladder has been referred to as a “keyhole sign” . Prenatal USG can also show hydronephrosis. In fact, postnatal evaluation of infants who had prenatal hydronephrosis can confirm the diagnosis of the posterior urethral valve in a large number of cases. The diagnosis of suspected cases is confirmed postnatally by MCU micturating cystourethrogram.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common infectious complication of nephrotic syndrome in children", "options": [{"label": "A", "text": "Meningitis", "correct": false}, {"label": "B", "text": "Acute meningoencephalitis", "correct": false}, {"label": "C", "text": "Subacute bacterial endocarditis", "correct": false}, {"label": "D", "text": "Spontaneous bacterial peritonitis", "correct": true}], "correct_answer": "D. Spontaneous bacterial peritonitis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Spontaneous bacterial peritonitis Infections are one of the most common disease-related complications in children with nephrotic syndrome .</p>\n<p><strong>Highyeild:</strong></p><p>Several factors including low serum immunoglobulin G concentrations, transferrin, and other factors such as fluid collection in cavities contribute to these infections in patients with nephrotic syndrome. Sepsis, due to subacute bacterial peritonitis, remains one of the most common infectious complications causing deaths in them. pneumoniae is the most important organism causing primary peritonitis in them; although other organisms such as beta-hemolytic streptococci , Haemophilus , and Gram-negative bacteria are also frequently involved.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common underlying anomaly in a child with recurrent UTI is", "options": [{"label": "A", "text": "Vesicoureteral reflux (VUR)", "correct": true}, {"label": "B", "text": "Posterior urethral valve", "correct": false}, {"label": "C", "text": "Neurogenic bladder", "correct": false}, {"label": "D", "text": "Renal calculi", "correct": false}], "correct_answer": "A. Vesicoureteral reflux (VUR)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Vesicoureteral reflux (VUR) Vesicoureteral reflux (VUR) is an abnormality of the urinary tract associated with the retrograde flow of urine from the urinary bladder into the upper urinary tract.</p>\n<p><strong>Highyeild:</strong></p><p>It is one of the predominant causes of recurrent UTI and reflux nephropathy in children. There are strong reports of its familial tendency and AD mode of inheritance. VUR is graded based on the degree of dilatation and renal collecting system morphology; Grade I reflux does not reach the renal pelvis; Grade II reflux reaches the renal pelvis with no dilatation of the collecting system; Grade III reflux involves mild to moderate dilatation of the ureter and moderate dilatation of the collecting system with normal or minimally deformed fornices; Grade IV reflux involves moderate dilatation of the ureter and moderate dilatation of the collecting system with blunt fornices; Grade V reflux involves gross dilatation of the ureter, marked dilatation of the collecting system; and intraparenchymal reflux. Treatment of VUR aims to preserve kidney function by minimizing the risk of pyelonephritis; management options either involve keeping children on antimicrobial prophylaxis and watchful expectancy for VUR to resolve spontaneously or immediate surgery. Faster resolution of VUR can be expected in children &lt; 1 year at presentation and those with a lower grade of reflux (grade I–III).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In children with stage III renal failure, urine output is (pRIFLE criteria)", "options": [{"label": "A", "text": "&lt; 0.3 ml/kg/hr", "correct": true}, {"label": "B", "text": "&lt; 0.5 ml/kg/hr", "correct": false}, {"label": "C", "text": "&lt; 0.8 ml/kg/hr", "correct": false}, {"label": "D", "text": "&lt; 1 ml/kg/hr", "correct": false}], "correct_answer": "A. < 0.3 ml/kg/hr", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>&lt; 0.3 ml/kg/hr According to the profile criteria, renal failure is defined as a decrease in estimated creatinine clearance (eCCl) by 75% or eCCL &lt; 35 ml/min/1.73 m2; and urine output &lt; 0.3 ml/kg/h for 24 hours or anuric for 12 h. Stage Serum creatinine Urine Output l &gt;25% decrease in eGFR &lt;0.5ml/kg/hour for 8 hours ll &gt;50% decrease in eGFR &lt;0.5ml/kg/hour for =16 hours lll &gt;75% decrease in eGFR or eGFR &lt; 35ml/min/1.73m² &lt;0.5ml/kg/hour for = 24 hours, or &lt; 0.3ml/kg/hour for 24 hours =12 hours Estimated GFR</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child had diarrhea for 8 days. He is dehydrated and urine output is reduced. Which of the following is not correct regarding renal failure in this patient?", "options": [{"label": "A", "text": "Urinary sodium &gt; 40 mEq/L", "correct": true}, {"label": "B", "text": "Urinary osmolality &gt; 500 mOsmoles/L", "correct": false}, {"label": "C", "text": "FeNa &lt; 1%", "correct": false}, {"label": "D", "text": "BUN/creatinine &gt; 20", "correct": false}], "correct_answer": "A. Urinary sodium > 40 mEq/L", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Urinary sodium &gt; 40 mEq/L Severe dehydration due to diarrhea or hypovolemia due to any cause can lead to pre-renal AKI . Characteristic investigation findings in these children are urinary sodium &lt; 20 mEq/L; FeNa &lt; 1%; urine osmolality &gt; 400 mOsm/L. Urine sodium &gt; 40 mEq/L indicates renal rather than the pre-renal cause of ARF.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Acute kidney injury in children is defined in pRIFLE criteria based on", "options": [{"label": "A", "text": "Serum creatinine", "correct": false}, {"label": "B", "text": "Serum creatinine and urine output", "correct": false}, {"label": "C", "text": "Estimated creatinine clearance and urine output", "correct": true}, {"label": "D", "text": "Estimated creatinine clearance", "correct": false}], "correct_answer": "C. Estimated creatinine clearance and urine output", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Estimated creatinine clearance and urine output Renal injury classification in pediatric RIFLE criteria (pRIFLE) is based on estimated creatinine clearance and urine output. Stage Serum creatinine Urine Output l &gt;25% decrease in eGFR &lt;0.5ml/kg/hour for 8 hours ll &gt;50% decrease in eGFR &lt;0.5ml/kg/hour for =16 hours lll &gt;75% decrease in eGFR or eGFR &lt; 35ml/min/1.73m² &lt;0.5ml/kg/hour for = 24 hours, or &lt; 0.3ml/kg/hour for 24 hours =12 hours eGFR-estimated GFR</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common anomaly of the upper urogenital tract causing obstruction is", "options": [{"label": "A", "text": "Ureteropelvic junction stenosis", "correct": true}, {"label": "B", "text": "Ectopic urethral opening", "correct": false}, {"label": "C", "text": "Ureterocele", "correct": false}, {"label": "D", "text": "Ectopic bladder", "correct": false}], "correct_answer": "A. Ureteropelvic junction stenosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ureteropelvic junction stenosis (Obstruction) is one of the most common causes of upper urogenital tract obstruction in children and is also believed to be by far the most common cause of pediatric hydronephrosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-year-old boy had a fever, dysuria, and microscopic hematuria for the last 3 days. Physical examination revealed a prominent suprapubic area which was dull on percussion. Urine examination revealed 8-10 RBC/hpf but no proteinuria. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Urinary Tract Infection (UTI)", "correct": false}, {"label": "B", "text": "Acute glomerulonephritis", "correct": false}, {"label": "C", "text": "Posterior urethral valve", "correct": true}, {"label": "D", "text": "Renal calculus", "correct": false}], "correct_answer": "C. Posterior urethral valve", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Posterior urethral valve Suprapubic distension in a 1-year-old boy strongly indicates lower urinary tract (bladder outlet) obstruction. The most common cause of bladder outlet obstruction in male children is the posterior urethral valve. Microscopic hematuria may be secondary to UTI which is common in these children.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "B/L renal agenesis in children is associated with", "options": [{"label": "A", "text": "Alport syndrome", "correct": false}, {"label": "B", "text": "Lowe syndrome", "correct": false}, {"label": "C", "text": "Potter syndrome", "correct": true}, {"label": "D", "text": "Prune belly syndrome", "correct": false}], "correct_answer": "C. Potter syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Potter syndrome Potter’s syndrome is associated with bilateral renal agenesis. Its components include P – Pulmonary hypoplasia; O – Oligohydramnios; T – Twisted skin (wrinkles in the skin); T - Twisted facies (abnormal Potter’s facies including flat nose, recessed chin, and epicanthic folds); E – Extremities’ defects; R – Renal agenesis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is the correct statement for Henoch–Schönlein's purpura?", "options": [{"label": "A", "text": "Vasculitis mediated by IgG", "correct": false}, {"label": "B", "text": "Most common age affected is 10-20 years", "correct": false}, {"label": "C", "text": "Clinical presentation includes palpable purpura, GI complaints, arthralgias, and renal involvement", "correct": true}, {"label": "D", "text": "Steroids have no role in its management", "correct": false}], "correct_answer": "C. Clinical presentation includes palpable purpura, GI complaints, arthralgias, and renal involvement", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Clinical presentation includes palpable purpura, GI complaints, arthralgias, and renal involvement Henoch Schonlein Purpura or HSP is also called IgA vasculitis and is the most common vasculitis in children. It commonly affects children between 4-8 years . HSP can present with rashes, arthralgia, and abdominal pain. Kidneys can be affected in about 50% of In the kidney, this disorder is pathologically related to IgA nephropathy with similar findings in renal histopathology and elevated systemic IgA levels and circulating IgA immune complexes. Affected children with IgA vasculitis have a mild course of the disease that resolves in most cases. Although microscopic hematuria without edema is the most common presentation, some patients may have macroscopic hematuria as well. Corticosteroids have been used in the management (with cyclophosphamide in the initial part of disease management).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "“Keyhole sign” on ultrasound sonography test (USG) is seen in children with", "options": [{"label": "A", "text": "Ureterocele", "correct": false}, {"label": "B", "text": "Multicystic dysplastic kidney", "correct": false}, {"label": "C", "text": "Polycystic kidney disease", "correct": false}, {"label": "D", "text": "Posterior urethral valve", "correct": true}], "correct_answer": "D. Posterior urethral valve", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Posterior urethral valve The posterior urethral valve is one of the most common causes of lower urinary tract (bladder outlet) obstruction and an important cause of renal insufficiency in male children. The disorder can be screened prenatally through an ultrasound (USG). Prenatal USG showing dilated posterior urethra and dilated bladder has been referred to as a “keyhole sign”. Prenatal USG can also show hydronephrosis. Postnatal evaluation of infants who had prenatal hydronephrosis can confirm the diagnosis of the posterior urethral valve in a large number of cases. The diagnosis of suspected cases is confirmed postnatally by Micturating cystourethrogram(MCU)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The primary cause of autosomal recessive polycystic kidney disease is a mutation in", "options": [{"label": "A", "text": "Polycystic Kidney and Hepatic Disease (PKHD1)", "correct": true}, {"label": "B", "text": "Polycystic Kidney Disease (PKD1)", "correct": false}, {"label": "C", "text": "Polycystic Kidney Disease (PKD2)", "correct": false}, {"label": "D", "text": "PKHD1 and PKD1", "correct": false}], "correct_answer": "A. Polycystic Kidney and Hepatic Disease (PKHD1)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Polycystic Kidney and Hepatic Disease (PKHD1) Autosomal recessive polycystic kidney disease (ARPKD), characterized by bilateral enlargement of both kidneys, is one of the most common inheritable kidney disorders in infants and children. This congenital cystic disorder of kidneys is caused by a mutation in the PKHD1 gene (chromosome 6). Cysts are uniform and radially arranged, derived from the collecting tubules. Dilatation and proliferation of biliary ducts with portal fibrosis is a common comorbid condition. Antenatal USG often shows a pepper-salt pattern (salt and pepper appearance) due to abnormal echogenicity generated by renal cysts. The disorder is invariably associated with congenital hepatic fibrosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 33 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 13 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 13-year-old female child presented with recurrent sinusitis fever, arthralgia, respiratory distress, hematuria and hypertension. Renal biopsy showed necrotising granuloma. The anti-proteinase 3 ANCA (Antineutrophil Cytoplasmic antibodies). Was positive. The most likely diagnosis is?", "options": [{"label": "A", "text": "Polyarteritis Nodosa", "correct": false}, {"label": "B", "text": "Wegener's granulomatosis", "correct": true}, {"label": "C", "text": "Microscopic polyangiitis", "correct": false}, {"label": "D", "text": "Churg Strauss syndrome", "correct": false}], "correct_answer": "B. Wegener's granulomatosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Wegener's granulomatosis Granulomatosis with Polyangiitis (Wegener granulomatosis) This condition is characterised by necrotising granulomatous angiitis affecting the respiratory tract and kidneys. It is rare in children. Constitutional symptoms are quite prominent. Presence of anti-neutrophil cytoplasmic antibodies (Antineutrophil Cytoplasmic antibodies). (Antineutrophil Cytoplasmic antibodies). (ANCAs), especially c-ANCA, are virtually pathognomonic. The long-term outlook is satisfactory with steroids, cyclophosphamide, and, occasionally, intravenous immunoglobulin.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 15-year-old female presented to the emergency department with a history of recurrent epistaxis, hematuria, and hematochezia. There was a history of profuse bleeding from the umbilicus stump at birth. Previous investigations revealed normal prothrombin time, activated partial thromboplastin time, thrombin time and fibrinogen levels. Her platelet count and platelet function test were normal, but the urea clot lysis test was positive. Which one of the following clotting facts is most likely deficient?", "options": [{"label": "A", "text": "Factor 10", "correct": false}, {"label": "B", "text": "Factor 11", "correct": false}, {"label": "C", "text": "Factor 12", "correct": false}, {"label": "D", "text": "Factor 13", "correct": true}], "correct_answer": "D. Factor 13", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Factor 13 Individuals with positive bleeding history, particularly with delayed bleeding, umbilical stump bleeding or miscarriages and in whom the initial panel of screening test is negative, should be tested for factor 13 deficiency.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An anxious father brought his 5-year-old son to a paediatrician with a history of fever for 5 days, a polymorphous rash on the trunk rash, irritability, and pain while doing joint movement and burning micturation. on examination, the paediatrician found bilateral non-purulent conjunctivitis without discharge and unilateral cervical lymphadenopathy. Tongue findings are shown in the image below. Which of the following is not likely to occur in this child?", "options": [{"label": "A", "text": "Coronary artery aneurysms", "correct": false}, {"label": "B", "text": "Elevated CRP", "correct": false}, {"label": "C", "text": "Thrombocytopenia", "correct": true}, {"label": "D", "text": "Edema of palms &amp; soles", "correct": false}], "correct_answer": "C. Thrombocytopenia", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882726737-QTDK006003IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Thrombocytopenia Based on the above clinical features &amp; image of a typical strawberry tongue appearance, the most probable diagnosis is Kawasaki's Kawasaki disease is Thrombocytopenia is not a characteristic finding of this disease, but instead, THROMBOCYTOSIS is a characteristic finding and commonly occurs in the 2nd week of the disease. So, Kawasaki disease can be associated with Cardiovascular risk in infancy or early age.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A &amp; D. KAWASAKI’s DISEASE is an acute febrile mucocutaneous lymph node syndrome mainly affecting infants &amp; children between 3 months to 5 years of age. it is the most joint vasculitic disorder of childhood &amp; mainly affects medium-sized muscular arteries (especially coronaries), which may result in aneurysms, dilatations, and stenoses. The diagnosis of KAWASAKI’s DISEASE has characteristic clinical findings, as follows:- Fever lasting for at least 5 days, along with The Presence of any 4 of the following 5 conditions: Bilateral nonpurulent conjunctivitis (without discharge) Changes of mucosae of the oropharynx (e.g. infected pharynx, infected lips, strawberry tongue) Changes of peripheral extremities (Acute stage: edema, erythema of hands or feet; Convalescent stage: desquamation, usually periungual.) Polymorphous rash (never vesicular) Cervical lymphadenopathy (at least 1 node &gt;=1.5cm; usually unilateral) Illness not explained by any other known disease process. Important Lab Findings of Kawasaki’s disease are: Thrombocytosis (in the 2nd week) Option: B. Elevated ESR &amp; CRP Sterile pyuria (suggestive of UTI) Complications of Kawasaki’s disease are: Coronary artery aneurysms Coronary artery stenoses Myocarditis Pericarditis Arthritis</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "While taking daily clinical rounds in a pediatric ward, you came across many children with signs &amp; symptoms suggestive of Kawasaki’s disease. They are at high risk for developing coronary artery aneurysms. Who among the following children is at the highest risk for developing this complication?", "options": [{"label": "A", "text": "A 5-yr. old boy with 14 days of fever and polymorphous rash.", "correct": true}, {"label": "B", "text": "A 2-yr. old boy with IV immunoglobulin treatment for fever on the 6th day.", "correct": false}, {"label": "C", "text": "A 10-yr. old girl with 6 days of fever and Beau lines on her nails.", "correct": false}, {"label": "D", "text": "A 8-yr. old girl with 2 days of fever and bilateral conjunctivitis.", "correct": false}], "correct_answer": "A. A 5-yr. old boy with 14 days of fever and polymorphous rash.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>A 5-yr. old boy with 14 days of fever and polymorphous rash. In this case, 5-yr. old boy with 14 days of fever and the polymorphous rash is at the highest risk for developing Kawasaki disease. RISK FACTORS FOR KAWASAKI'S DISEASE ARE Male sex predominance Fever lasting for at least 5 days &amp; &gt;= 14 days Age under 5 years, mainly. Thrombocytosis Elevated ESR &amp; CRP KAWASAKI’s DISEASE is an acute febrile mucocutaneous lymph node syndrome mainly affecting infants &amp; children between 3 months to 5 years of age. The diagnosis of KAWASAKI’s DISEASE has characteristic clinical findings:- a) Fever lasting at least 5 days. Presence of any 4 of the following 5 conditions: Bilateral nonpurulent conjunctivitis (without discharge) Changes of mucosae of the oropharynx (e.g. infected pharynx, infected lips, strawberry tongue) Changes of peripheral extremities (Acute stage: edema, erythema of hands or feet Convalescent stage: desquamation, usually periungual.) Polymorphous rash (never vesicular) Cervical lymphadenopathy (at least 1 node &gt;=1.5cm; usually unilateral) So, Kawasaki disease can be associated with Cardiovascular risk in infancy or early age.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - O ption: B. As IVIg has been started early for treatment, the risk of complications is lower in the child Low-dose aspirin (3-5mg/kg/day) is continued for 4-6 weeks for its anti-platelet activity. Option C. Is not at high risk of developing a disease as the girl's AGE is &gt;5yrs, and Beau lines on nails can be seen during the convalescent phase. Option: D. Is not prone to develop a disease as age is &gt;5yrs and also fever is lasting only for 2 days. The clinical features evolve sequentially over a period of days and all need not be present altogether at a given point of time.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Naira, a 3-year-old girl presented to your clinic with features like edema, erythema over hands &amp;feet, cracked lips &amp; strawberry tongue, leading to a diagnosis of Kawasaki disease. She was admitted to the pediatric ward for her treatment. Which of the following is the treatment of choice for her condition?", "options": [{"label": "A", "text": "IV cyclophosphamide", "correct": false}, {"label": "B", "text": "SUBCUTANEOUS methotrexate", "correct": false}, {"label": "C", "text": "IV methylprednisolone", "correct": false}, {"label": "D", "text": "IV immunoglobulins", "correct": true}], "correct_answer": "D. IV immunoglobulins", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>IV immunoglobulins This is a case of a 3- yr. old girl diagnosed with Kawasaki disease. Clinical Features of Kawasaki’s Disease : High-grade fever Extreme irritability Perianal desquamation Reactivation of BCG scar Edema and erythema over hands &amp; feet Red cracked lips Strawberry tongue</p>\n<p><strong>Highyeild:</strong></p><p>The treatment of choice for this girl is IV immunoglobulins (2g/kg) and aspirin in anti-inflammatory doses (30-50mg/kg) until the child becomes afebrile. (OPTION D). Low-dose aspirin (3-5mg/kg/day) is continued for 4-6 weeks for its anti-platelet activity. Kawasaki disease is also associated with aneurysms -So; in that case, corresponding surgical intervention is required. Inappropriately treated children, the prognosis is excellent.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A . Treatment with IV cyclophosphamide (500mg/m2) monthly pulses is given in patients with systemic sclerosis, followed by maintenance daily by azathioprine or weekly methotrexate, which can be life-saving in interstitial lung disease patients. IV cyclophosphamide has also helped improve long-term outcomes in children with severe lupus nephritis. Option: B. Treatment with S.C (or oral) methotrexate (15-25 mg/m2/week) is given in patients of Juvenile idiopathic Arthritis (JIA) . children seem to tolerate mtx better than adults and have fewer adverse effects. It is also given in patients with severe uveitis associated with oligoarthritis. Also, it is the mainstay of maintenance therapy in juvenile dermatomyositis (JDM) . Option: C. Treatment with pulse IV methylprednisolone (30mg/kg/day) for 3-5 days is given in patients of juvenile dermatomyositis(JDM) , followed by gradual tapering doses of oral prednisolone (1.5-2mg/kg/day). It also treats life-threatening complications like class iv lupus nephritis, myocarditis, and encephalopathy.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A Young girl presented to the OPD with fever and malaise for 1 week. She also complained of pain, numbness &amp; weakness in her arms and legs, which has been gradually increasing. Clinical examination reveals weak arterial pulses &amp; lab investigations show elevated ESR &amp; CRP. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Giant cell arteritis", "correct": false}, {"label": "B", "text": "Aortic arch dissection", "correct": false}, {"label": "C", "text": "Takayusu arteritis", "correct": true}, {"label": "D", "text": "Coarctation of the aorta", "correct": false}], "correct_answer": "C. Takayusu arteritis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Takayusu arteritis The above clinical features with the marked weakening of pulses in the extremities &amp; lab. Findings of elevated ESR &amp; CRP are suggestive of Takayusu arteries. Also known as “pulseless disease”. It is a large vessel vasculitis that commonly affects young females or adolescents. Takayasu arteritis is also known as Aortic arch Syndrome because it involves branches of the aortic arch.</p>\n<p><strong>Highyeild:</strong></p><p>This is characterised by segmental inflammatory pan arteritis resulting in stenosis and aneurysms of the aorta &amp; its major branches, causing weak arterial pulses. It is also the commonest cause of renovascular hypertension in India. It is classified according to the site involved: Type 1: Aortic arch, Type 2: Descending aorta, Type 3: Aortic arch &amp; Descending aorta, Type 4: Aorta &amp; pulmonary artery. Depending on the artery occluded, patients present with the following symptoms:- Subclavian artery (most common) – leads to pain, numbness, claudication &amp; weak radial pulses. Common carotid artery- visual symptoms, stroke and syncope. Renal artery- hypertension and renal failure. Classification criteria for childhood takayusu arteritis- Angiographic abnormalities (conventional, CT or MRI) of the aorta or its main branches, plus at least one of the following 4 features: ● Decreased peripheral artery pulse(s) and/or claudication of extremities ● Blood pressure difference between both limbs &gt;10 mm Hg ● Bruits over aorta and/or its major branches Hypertension</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Giant cell arteritis is a large vessel vasculitis, common in older women (&gt; 50 yrs of age). Usually involves temporal artery Characterized by fever, malaise, headache Depending upon the artery involved, the patient may have tenderness over the affected artery, scalp pain, jaw claudication. Laboratory findings reveals elevated esr, normocytic normochromic anemia. Option: B. Aortic arch dissection is not a type of vasculitis. Very rare in young children. However, this disease is certainly recognized in children, particularly with congenital heart diseases, connective tissue disorders or severe trauma. The most frequent complaint is severe pain, characteristic of migratory pain. Option: D. Coarctation of aorta is a clinical entity located at the junction of the arch with the descending aorta. It is a sharp indentation involving the anterior, lateral and posterior wall of the aorta. A bicuspid aortic valve is the most common association. Clinical features are: Infants presents with left ventricular dysfunction and heart failure. Intermittent claudication, pain and weakness of legs Dyspnea while running Examination shows delayed and weak femorals and strong brachial arteries. The characteristic notching of the lower borders of ribs is seen beyond the age of 10years.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A previously healthy 4-year-old girl came to you with complaints of fever, myalgia, and arthritis, along with skin involvement in the form of livedo reticularis, as shown in the image. On angiography, microaneurysms are demonstrated. There was no family history of any autoimmune or vascular disease. Her B.P was 160/100mm hg. What is the most probable diagnosis for this condition?", "options": [{"label": "A", "text": "Polyarteritis nodosa", "correct": true}, {"label": "B", "text": "Takayusu arteritis", "correct": false}, {"label": "C", "text": "Giant cell arteritis", "correct": false}, {"label": "D", "text": "Microscopic polyangiitis", "correct": false}], "correct_answer": "A. Polyarteritis nodosa", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882726792-QTDK006008IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Polyarteritis nodosa The image shows polyarteritis nodosa associated livedo reticularis &amp; microaneurysms on angiography, and based on the above clinical features along with raised B.P leads to the diagnosis of “Polyarteritis Nodosa”(PAN)- OPTION (A) Polyarteritis nodosa is a medium vessel vasculitis that can be associated with aneurysms in Renal artery.</p>\n<p><strong>Highyeild:</strong></p><p>“PAN” is necrotising arteritis of the medium-sized blood vessels. It is rare in childhood. Clinical manifestations lead to multisystem involvement &amp; include fever, hypertension, abdominal pain, arthritis, myalgia, skin involvement (especially livedo reticularis), neurological involvement (seizures, encephalopathy) and peripheral neuropathy (mononeuritis multiplex). Classification criteria for childhood PAN: Table 22.6: Classification criteria for childhood polyarteritis nodosa A childhood illness characterized by the presence of either a biopsy showing small and mid-size artery necrotizing vasculitis or angiographic abnormalities (aneurysms or occlusions), plus at least 2 of the following: Skin involvement Myalgia or muscle tenderness Systemic hypertension Abnormal urinalysis and/or impaired renal function Mononeuropathy or polyneuropathy Testicular pain or tenderness Signs or symptoms suggesting vasculitis of any other major organ systems (gastrointestinal, cardiac, putmo- nary or central nervous system): *Should include conventional angiography il magnetic resonance angiography is negative On angiography, microaneurysms may be demonstratable in the renal arteries or celiac axis. Treatment consists of Long-term immunosuppression (initially with cyclophosphamide and prednisolone, followed by azathioprine.)</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. It is a large vessel vasculitis that commonly affects young females or adolescents. This is characterized by a segmental inflammatory panarteritis resulting in stenosis and aneurysms of aorta &amp; its major branches causing weak arterial pulses. It is also a commonest cause of renovascular hypertension in india. Clasification criteria for childhood takayusu arteritis- Table 22.5: Classification criteria for childhood Takayasu arteritis Angiographic abnormalities (conventional, CT or MRI) of the aorta or its main branches, plus at least one of the following 4 features: Decreased peripheral artery pulse(s) and/or claudication of extremities Blood pressure difference between both limbs &gt;10 mm Hg Bruits over aorta and/or its major branches Hypertension Option: C. Giant cell arteritis is a large vessel vasculitis, common in older women (&gt; 50 yrs of age). Usually involves temporal artery Characterized by fever, malaise, headache Depending upon the artery involved, the patient may have tenderness over the affected artery, scalp pain, jaw claudication. Laboratory findings reveals elevated esr, normocytic normochromic anemia. Option: D. Microscopic Polyangitis is a condition, which mostly affects small blood vessels, including venules &amp; capillaries. The symptoms of upper respiratory involvement is very rare. In Kidneys: Glomerulonephritis with rapid progression to renal failure. In Lungs: less commonly involved. In Skin: purpuric rash present. Tends to occur in adults 50-60yrs. Of age. Diagnosis :- By Urine analysis, it shows excess of RBCs, proteins. P.ANCA positive in blood tests. Classification criteria for childhood polyarteritis nodosa A childhood illness characterized by the presence of either a biopsy showing small and mid-size artery necrotizing vasculitis or angiographic abnormalities (aneurysms or occlusions),\" plus at least 2 of the following: Skin involvement Myalgia or muscle tenderness Systemic hypertension Abnormal urinalysis and/or impaired renal function Mononeuropathy or polyneuropathy Testicular pain or tenderness Signs or symptoms suggesting vasculitis of any other major organ systems (gastrointestinal, cardiac, pulmo- nary or central nervous system) Should include conventional angiography if magnetic resonance angiography is negative Classification criteria for childhood Takayasu arteritis Angiographic abnormalities (conventional, CT or MRI) of the aorta or its main branches, plus at least one of the following 4 features: ● Decreased peripheral artery pulse(s) and/or claudication of extremities ● Blood pressure difference between both limbs &gt;10 mm Hg ● Bruits over aorta and/or its major branches Hypertension Module Name - CONNECTIVE TISSUE DISEASES - Vasculitis In Childhood</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 10-YEAR-old boy named Rohan has a purpuric rash over knee joints, legs &amp; buttocks, as shown in the image. Urine examination shows the following: Proteinuria + Hematuria +++ Along with B.P 180/110 mm hg &amp; the child also complained of intermittent &amp; colicky abdominal pain with vomiting. What is the most probable diagnosis?", "options": [{"label": "A", "text": "Polyarteritis Nodosa (PAN)", "correct": false}, {"label": "B", "text": "Systemic lupus erythematosus (SLE)", "correct": false}, {"label": "C", "text": "Henoch schonlein purpura (HSP)", "correct": true}, {"label": "D", "text": "Immune thrombocytopenic purpura (ITP)", "correct": false}], "correct_answer": "C. Henoch schonlein purpura (HSP)", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882726913-QTDK006009IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Henoch schonlein purpura (HSP) The boy, in this case, presents with purpuric rashes over knee joints and legs as shown in the image, suggestive of a diagnosis of “Henoch Schonlein Purpura”(HSP)</p>\n<p><strong>Highyeild:</strong></p><p>Classification criteria for childhood HSP:- Classification criteria for childhood Honoch-Schönlein purpura Palpable purpura with at least one of the following: Any biopsy showing predominant IgA deposition Ditluse abdominal pain Arthritis or arthralgia Renal involvement (any hematuria andor proteinuria) The illness begins with a purpuric rash more prominent in the extensor surfaces of lower extremities &amp; buttocks. It may be macular, maculopapular or even urticarial and difficult to diagnose in initial days. Laboratory Investigations: IgA vasculitis is a clinical diagnosis. Increase in total serum IgA levels. Skin Biopsy shows leukocytoclastic vasculitis. On indirect immunofluorescence, there are deposits of IgA in skin as well as renal biopsies. TREATMENT: MAINLY, maintenance of hydration and pain relief. Prednisolone(1-1.5mg/kg/day) is often given in children with GIT involvement and usually continued for 2-3 weeks. Nephritis due to IgA vasculitis may need aggressive management with immunosuppressants(prednisolone and azathioprone)</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. -\"PAN\" is a necrotizing arteritis of the medium-sized blood vessels. It is rare in childhood. Clinical manifestations leads to multisystem involvement &amp; includes fever, hypertension, abdominal pain, arthritis, myalgia, skin involvement (especially livedo ticularis), neurological involvement (seizures, encephalopathy) and peripheral neuropathy (mononeuritis multiples). Classification criteria for childhood PAN Table 22.6: Classification criteria for childhood polyarteritis nodosa A childhood liness characterized by the presence of either a biopsy showing erall and mid-size artery necrotizing vascul or angiographic abnormales (aneurysms or coclusions),\"plus at least 2 of the following: Myalgia or muscle tenderness Systemic hypertension Abnormal urinalysis andfor impaired renal function Mononeuropathy or polyneuropathy Testicular pain or tenderness Signs or symptoms suggesting vasculitis of any other major organ systems (gastrointestinal, cardiac, putronary or central nervous system) *Should include convenerat angiography angiography is negative Option: B. SLE It is an autoimmune disorder characterized by inflammation of connective tisssues and blood vessels resulting in multisystem involvement. The hallmark of SLE is the presence of antinuclear antibodies (ANA), Childhood SLE is usually more severe than adults. Diagnosis of SLE is done by Systemic Lupus International Collaborating Clinics (SUCC) criteria: Table 22.4: SLICC Classification Criteria for SLE Requirements: 24 criteria (at least 1 clinical and 1 lacratory criteria) OR biopsy-proven lupus nephritis with posive ANA or anti-dsDNA Clinical criteria Acute cutaneous lupus Chronic cutaneous lupus Oral or nasal ulcers Non-scarring alopecia Arthritis Serositis Renal involvement Neurologic involvement Hemolytic anemia Leukopenia Thrombocytopenia (&lt;100,000/cu mm³) Immunologie criteria Antinuclear antibody (ANA) Anti-dsDNA Anti-Smith Antiphospholipid antibody Low complement (C3,C4,CH50) Direct Coombs' test (do not count in presence of hemolytic anemia) Option: D. - Immune Thrombocytopenic Purpura (ITP) is the commonest bleeding disorder presenting in children between 1 and 7 years of age. Thrombocytopenia lasting &lt;6 months is termed acute, and 6 months is termed chronic. An immune pathogenesis, against the platelet glycoprotein lb/a complex. Children presents with the sudden appearance of bruises and mucosal bleeding: epistaxis, oral oozing and prolonged bleeds. Bleeding is mild unless the platelet counts are below 20,000/microlitre. With counts from 20,000 50,000/microlitre, petechiae and ecchymoses are observed following mild trauma. The patient is examined for features of marrow failure, short stature, hyperpigmentation and thrombocytopenia. A bone marrow shows increased production of megakaryocytes. Palpable purpura with at least one of the following: ● Dilluse abdominal pain ● Any biopsy showing predominant IgA deposition ● Arthritis or arthralgia ● Ronal involvement (any hematuria and/or proteinuria) Classification criteria for childhood polyarteritis nodosa A childhood illness characterized by the presence of either a biopsy showing small and mid-size artery necrotizing vasculitis or angiographic abnormalities (aneurysms or occlusions),\" plus at least 2 of the following: Skin involvement Myalgia or muscle tenderness Systemic hypertension Abnormal urinalysis and/or impaired renal function Mononeuropathy or polyneuropathy Testicular pain or tenderness Signs or symptoms suggesting vasculitis of any other major organ systems (gastrointestinal, cardiac, pulmo- nary or central nervous system)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-Year-old boy presents to the emergency room with colicky &amp; diffuse abdominal pain, arthralgia, and glomerulonephritis. His mother tells him that he cannot walk due to knee pain. On renal biopsy, IgA deposits on the skin are seen, and on examination, palpable purpura is noted. What is the most likely diagnosis?", "options": [{"label": "A", "text": "IgA Vasculitis", "correct": true}, {"label": "B", "text": "IgA Nephropathy", "correct": false}, {"label": "C", "text": "Juvenile Idiopathic Arthritis", "correct": false}, {"label": "D", "text": "Hemolytic uremic syndrome", "correct": false}], "correct_answer": "A. IgA Vasculitis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>IgA Vasculitis The given clinical features above, along with IgA skin deposit,s suggests a diagnosis of “HSP”, Also known as IgA Vasculitis.</p>\n<p><strong>Highyeild:</strong></p><p>It is a common small-vessel vasculitis in childhood and is characterised by a non-thrombocytopenic and usually palpable purpura, transient arthralgia and abdominal symptoms. IgA vasculitis is associated with certain vasculitic symptoms like diffuse abdominal pain, arthritis, and Renal involvement. Classification criteria for childhood HSP:- Table 22.7: Classification criteria for childhood Henoch- Schönlein purpura Palpable purpura with at least one of the following: Diffuse abdominal pain Any biopsy showing predominant IgA deposition Arthritis or arthralgia Renal involvement (any hematuria and/or proteinuria) The illness begins with a purpuric rash more prominent in the extensor surfaces of lower extremities &amp; buttocks. It may be macular, maculopapular or even urticarial and difficult to diagnose in initial days. Laboratory Investigations: IgA vasculitis is a clinical diagnosis. Increase in total serum IgA levels. Skin Biopsy shows leukocytoclastic vasculitis. On indirect immunofluorescence, there are deposits of IgA in skin as well as renal biopsies. TREATMENT: MAINLY, maintenance of hydration and pain relief. Prednisolone(1-1.5 mg/kg/day) is often given in children with GIT involvement and usually continued for 2-3 weeks. Nephritis due to IgA vasculitis may need aggressive management with immunosuppressants (prednisolone and azathioprone).</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. - Patients with IgA Nephropathy or Berger's disease presents with gross hematuria, often associated with a preceeding or ongoing viral infection of the upper respiratory tract. Option: C. - Juvenile Idiopathic Arthritis (JIA) is characterized by fever of atleast 2 weeks duration associated with arthritis, evanescent erythematous rash, hepatosplenomegaly, generalized lymphadenopathy, and serositis. Option: D. - Hemolytic Uremic Syndrome (HUS) is characterized by a triad of microangiopathic hemolytic anemia, thrombocytopenia, and acute kidney injury. Classification criteria for childhood Honoch-Schönlein purpura Palpable purpura with at least one of the following: ● Dilluse abdominal pain ● Any biopsy showing predominant IgA deposition ● Arthritis or arthralgia ● Ronal involvement (any hematuria and/or proteinuria)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is the most commonly involved artery in patients with Takayusu Arteritis?", "options": [{"label": "A", "text": "Middle Meningeal Artery", "correct": false}, {"label": "B", "text": "Common carotid artery", "correct": false}, {"label": "C", "text": "Subclavian artery", "correct": true}, {"label": "D", "text": "Radial artery", "correct": false}], "correct_answer": "C. Subclavian artery", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Subclavian artery The most common artery involved in Takayusu Arteritis is the Subclavian Artery. Takayasu Arteritis is also known as Aortic Arch syndrome because of the involvement of branches of the Aortic arch. The 2nd most common artery affected is the Common carotid artery.</p>\n<p><strong>Highyeild:</strong></p><p>PATIENTS present with pain, claudication, and weakness of the affected limb. The arterial pulse in the affected limb may be weak or absent. The order of arteries affected in Takayusu Arteritis is Subclavian artery &gt; Common carotid artery &gt; Abdominal aorta &gt; renal artery&gt; aortic arch = vertebral &gt; celiac axis &gt; iliac artery &gt; pulmonary &gt; coronary artery.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - O ption: A. Middle Meningeal Artery can cause common injuries during head trauma. It can cause an epidura l hematoma , migraine headaches (most commonly involved) and accumulation of blood between the dura mater &amp; skull. Option: D. Radial artery is used mainly for catheterisation in conditions like coronary artery diseases, congenital heart diseases, heart failure, and coronary artery bypass procedures.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old boy presents with occasional hemoptysis &amp; glomerulonephritis. Lab. Investigations reveal the presence of C-ANCA Antibodies and elevated ESR &amp; RBC casts in the urine. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Microscopic polyangiitis", "correct": false}, {"label": "B", "text": "Wegener’s granulomatosis", "correct": true}, {"label": "C", "text": "Good pasture’s syndrome", "correct": false}, {"label": "D", "text": "Churg-Strauss syndrome", "correct": false}], "correct_answer": "B. Wegener’s granulomatosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Wegener’s granulomatosis The 6- yr. old boy presenting with hemoptysis and glomerulonephritis, and the presence of C-ANCA Antibody along with elevated ESR and RBCs casts in the urine leads to the diagnosis of WEGENER’S GRANULOMATOSIS.</p>\n<p><strong>Highyeild:</strong></p><p>Wegener’s granulomatosis, also known as Granulomatosis with polyangiitis , is characterised by necrotising granulomatous angiitis affecting the respiratory tract (sinusitis, otitis media) and kidneys (proteinuria, hematuria, and hypertension). It is rare in children. It is one of the components of Pulmonary – renal syndromes because of the involvement of both lungs and kidneys. Apart from these organs, the disease can also affect the eye &amp; skin. skin lesions present as palpable purpura and subcutaneous nodules. Lab. Investigations show anaemia, elevated ESR, and ANCA positivity.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - O ption: A. Microscopic Polyangiitis is a condition which mostly affects small blood vessels, including venules &amp; capillaries. The symptoms of upper respiratory involvement are very rare. In Kidneys: Glomerulonephritis with rapid progression to renal failure. In Lungs: less commonly involved. In Skin: purpuric rash present. It tends to occur in adults 50-60yrs. Of age. Diagnosis:- By Urine analysis, it shows excess RBCs and proteins. P.ANCA positive in blood tests. Option: C . GOOD PASTURE’S SYNDROME is a very rare childhood disease characterised by pulmonary haemorrhage and rapidly evolving glomerulonephritis. It is an Anti-GBM disease and presents with type II hypersensitivity reaction. Symptoms are: Difficulty in breathing Chest pain &amp; cough Nosebleeds &amp; coughing up blood Pale skin(pallor) ANCA Antibody is present in it. O ption: D. Churg-Strauss syndrome ( eosinophilic granulomatosis with polyangiitis) is a necrotising small to medium-sized vessel vasculitis . It is characterised by asthma, eosinophilia, and extravascular granuloma formation. A triad of skin lesions, asymmetric mono neuritis multiplex, and eosinophilia is seen. Renal involvement is less common and less severe than another small vessel vasculitis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child who presented with skin rashes, hematuria &amp; sinusitis has been diagnosed with granulomatosis with polyangiitis. Which of the following drugs would you not prescribe to manage this patient?", "options": [{"label": "A", "text": "Prednisolone", "correct": false}, {"label": "B", "text": "Cyclophosphamide", "correct": false}, {"label": "C", "text": "Hydroxychloroquine", "correct": true}, {"label": "D", "text": "Methotrexate", "correct": false}], "correct_answer": "C. Hydroxychloroquine", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hydroxychloroquine Here, the child is diagnosed with granulomatosis with Wegener's granulomatosis is one of the components of Pulmonary, and renal syndromes because of the involvement of both organs. Important drugs used in the managemen t of this disease ( Wegener's granulomatosis are: Option: A. Prednisolone Option: B. Cyclophosphamide Option: D. Methotrexate Rituximab hydroxychloroquine is a DMARDS used in the treatment of JIA, Rheumatoid arthritis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Neha, a 16-yr. old girl comes to the clinic with complaints of recurrent painful oral ulcers, as shown in the image &amp; also frequent genital ulcers. On taking history, she further mentioned that similar complaints were also present in her mother in the past. Also, she experiences redness in the eyes sometimes &amp; altered sensorium. On the evaluation of all these symptoms, the doctor suspects it to be Behcet’s disease. Which of the following feature would you not expect to see in this child?", "options": [{"label": "A", "text": "Pulmonary embolism", "correct": false}, {"label": "B", "text": "Erythema nodosum", "correct": false}, {"label": "C", "text": "Arterial thrombosis", "correct": false}, {"label": "D", "text": "Nail-fold capillary abnormalities", "correct": true}], "correct_answer": "D. Nail-fold capillary abnormalities", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882726997-QTDK006016IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nail-fold capillary abnormalities Based on the above case scenario &amp; image, the diagnosis is Behcet's disease. it is not associated with nail fold capillary abnormalities, typically seen in systemic sclerosis. Because of vasculitic inflammation, Behcet’s disease can be associated with Aphthous ulcers in Mouth or Penis. It’s an extremely uncommon vasculitic disorder with variable clinical manifestations. MAJOR: Aphthous stomatitis, genital ulceration, cutaneous manifestations and ocular disease. MINOR: Gastrointestinal disease, thrombophlebitis, arthritis, family history and neurological involvement. Multiple relapses with significant disability characterise Behcet’s disease from ocular and neurological manifestations. Widespread thrombosis (venous &amp; arterial) of large vessels may be life-threatening, and many patients show a positive pathergy test (cutaneous pustular reaction following needle pricks) HLA B5 and HLA B51 haplotypes have been associated with this syndrome. Pulmonary embolism is the most severe feature of pediatric behcet's disease. Features of Behcet's disease: Option: A. Pulmonary embolism Option: D. Erythema nodosum Option: C. Arterial &amp; venous thrombosis Redness in eyes Altered sensorium</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 23 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 38 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Which of the following is a wrong statement about parvovirus B19 infection?", "options": [{"label": "A", "text": "RNA virus", "correct": true}, {"label": "B", "text": "Hydrops fetalis", "correct": false}, {"label": "C", "text": "Arthropathy", "correct": false}, {"label": "D", "text": "Slapped cheek appearance", "correct": false}], "correct_answer": "A. RNA virus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>RNA virus Parvovirus B19 is a member of the family Parvoviridae. It is a single-stranded DNA virus (and not an RNA virus). It causes a wide range of clinical manifestations in both children and adults.</p>\n<p><strong>Highyeild:</strong></p><p>In children, the most common manifestation of parvovirus B19 is a mild rash-producing illness called erythema infectiosum. This illness is associated with the classic \"slapped cheek\" rash, more commonly seen in young children. In addition, this virus is also known to cause arthropathy (a transient small joint arthropathy), which is more commonly seen in adults. In comparison to adults, &lt; 10% of children experience arthropathy, which mainly involves the knee joint. Additionally, Parvovirus B19 infection in pregnancy (usually first 12 weeks) is associated with hydrops fetalis. Parvovirus B19 is also associated with an erythematous exanthem of the hands and feet with a distinct margin at the wrist and ankle joints (papular-purpuric \"gloves-and-socks\" syndrome [PPGSS]). Less commonly manifests Parvovirus B19 infection can manifest as vasculitis, myocarditis, and encephalitis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Papular purpuric gloves and socks syndrome (PPGSS) is associated with which viral infection?", "options": [{"label": "A", "text": "Coronavirus", "correct": false}, {"label": "B", "text": "Human Herpesvirus (HHV) 6", "correct": false}, {"label": "C", "text": "Epstein Barr virus (EBV)", "correct": false}, {"label": "D", "text": "Parvovirus B19", "correct": true}], "correct_answer": "D. Parvovirus B19", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Parvovirus B19 Parvovirus B19 is a member of the family Parvoviridae. It is a single-stranded DNA virus (and not an RNA virus).</p>\n<p><strong>Highyeild:</strong></p><p>It causes a wide range of clinical manifestations in both children and adults. In children, the most common manifestation of parvovirus B19 is a mild rash-producing illness called erythema infectiosum. This illness is associated with the classic \"slapped cheek\" rash, more commonly seen in young children. In addition, this virus is also known to cause arthropathy (a transient small joint arthropathy), which is more commonly seen in adults. In comparison to adults, &lt; 10% of children experience arthropathy, which mainly involves the knee joint. Additionally, parvovirus B19 infection in pregnancy (usually first 12 weeks) is associated with hydrops fetalis. Parvovirus B19 is also associated with an erythematous exanthem of the hands and feet with a distinct margin at the wrist and ankle joints (papular-purpuric \"gloves-and-socks\" syndrome [PPGSS]). Less commonly manifests Parvovirus B19 infection can manifest as vasculitis, myocarditis, and encephalitis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is the last to appear in measles infection?", "options": [{"label": "A", "text": "Fever", "correct": false}, {"label": "B", "text": "Koplik spots", "correct": false}, {"label": "C", "text": "Coryza", "correct": false}, {"label": "D", "text": "Rash", "correct": true}], "correct_answer": "D. Rash", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rash The incubation period of measles infection in children is about 8-12 days. After the incubation period, prodromal symptoms appear – which include fever, cough, coryza and conjunctivitis. Koplik spots are white spots that appear on the inner side of the cheeks, usually 2-3 days after the onset of fever (before the rash has begun). Rash appears about 4-5 days after the onset of prodromal symptoms and therefore is the last among the signs/symptoms mentioned in the choices to appear. Fever rises in intensity with the onset of rash</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A pregnant female had a history of flu-like symptoms and cervical lymphadenopathy in the first trimester of her pregnancy. She was non-compliant with spiramycin which was prescribed to her by her gynaecologist. She gave birth to a full-term neonate who had hydrocephalus and intracerebral calcification. Which of these infections is likely caused?", "options": [{"label": "A", "text": "Cytomegalovirus (CMV)", "correct": false}, {"label": "B", "text": "Rubella", "correct": false}, {"label": "C", "text": "Syphilis", "correct": false}, {"label": "D", "text": "Toxoplasmosis", "correct": true}], "correct_answer": "D. Toxoplasmosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Toxoplasmosis The typical triad of hydrocephalus, intracranial (intracerebral) calcifications and chorioretinitis is most likely suggestive of congenital toxoplasmosis. However, congenital toxoplasmosis has a wide range of clinical manifestations (including microcephaly and Intra Uterine Growth Restriction- IUGR), and can present as subclinical infection in 75% of cases. It is an infection caused by the parasite Toxoplasma gondii. Two main modes of infection in humans are oral (ingestion of undercooked contaminated meat containing T gondii cysts) and congenital infection. For congenital infections, treatment regimens including pyrimethamine and sulfadiazine with leucovorin for at least 1-year duration have been successful.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Blueberry muffins rash in neonates are associated with the following congenital infection?", "options": [{"label": "A", "text": "Rubella", "correct": true}, {"label": "B", "text": "Toxoplasmosis", "correct": false}, {"label": "C", "text": "Hepatitis B Virus HBV infection", "correct": false}, {"label": "D", "text": "Cytomegalovirus infection", "correct": false}], "correct_answer": "A. Rubella", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rubella One of the sites of extramedullary hematopoiesis, a normal phenomenon during embryologic development till 5 months of gestation, is the dermis. Prolonged dermal hematopoiesis extending after birth leads to blueberry muffin lesions on the neonate.</p>\n<p><strong>Highyeild:</strong></p><p>These lesions are non-blanching; they either appear as blue-red coloured macules or dome-shaped papules, majorly present on the trunk, head, and neck. This term was coined by paediatricians to describe cutaneous manifestations observed in newborns infected with rubella during the American epidemic of the 1960s. Overall, blueberry muffins are associated with either congenital (TORCH) infections or hematologic dyscrasias (such as hemolysis due to ABO/Rh incompatibility). The only TORCH infections that are associated with these lesions are rubella and Cytomegalovirus CMV.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Neck swelling (bull neck appearance) seen in diphtheria is primarily due to", "options": [{"label": "A", "text": "Soft tissue edema", "correct": false}, {"label": "B", "text": "Hemorrhage", "correct": false}, {"label": "C", "text": "Cervical lymphadenopathy", "correct": true}, {"label": "D", "text": "None of these", "correct": false}], "correct_answer": "C. Cervical lymphadenopathy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Cervical lymphadenopathy Severe form of diphtheria is associated with sudden and severe disease onset, usually co-associated with high fever and vomiting. In most cases, there is a big swelling in the neck of these children, also called “bull neck appearance” that is due to cervical lymphadenopathy.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-month-old previously healthy infant develops a high-grade fever. There are no other symptoms including those of Upper respiratory tract infection URTI and no elicitable clinical signs. Fever abruptly disappears on day 3 followed by the appearance of subtle generalized rashes that lasted 2 days. Oral examination on day 4 reveals erythematous papules (exanthems) on the base of the uvula and soft palate mucosa. Which infection was this child most likely suffering from?", "options": [{"label": "A", "text": "Measles", "correct": false}, {"label": "B", "text": "Erythema infectiosum", "correct": false}, {"label": "C", "text": "Roseola infantum", "correct": true}, {"label": "D", "text": "Rubella", "correct": false}], "correct_answer": "C. Roseola infantum", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Roseola infantum Roseola infantum is a common childhood viral exanthematous illness caused by human herpesvirus 6 (HHV-6); and sometimes HHV 7. It mainly develops in infants and is associated with abrupt onset of fever, without notable Upper respiratory tract infection(URTI) signs and symptoms. Fever characteristically disappears by day 3 followed by the appearance of pale pink rashes which last for 2 days. It is associated with an enanthem called Nagayama spots in almost 2/3rd of cases that consist of erythematous papules on the mucosa of the soft palate and the base of the uvula.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An 8-month-old previously healthy infant develops a high-grade fever. There are no other symptoms including those of Upper respiratory tract infection (URTI) and no elicitable clinical signs. Fever abruptly disappears on day 3 followed by the appearance of subtle generalized rashes that lasted 2 days. Oral examination on day 4 reveals erythematous papules (exanthems) on the base of the uvula and soft palate mucosa. The enanthem seen in the above case is most likely", "options": [{"label": "A", "text": "Nagayama spots", "correct": true}, {"label": "B", "text": "Forchheimer spots", "correct": false}, {"label": "C", "text": "Koplik spots", "correct": false}, {"label": "D", "text": "None of these", "correct": false}], "correct_answer": "A. Nagayama spots", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nagayama spots Roseola infantum is a common childhood viral exanthematous illness caused by human herpesvirus 6 (HHV-6); and sometimes HHV 7. It mainly develops in infants and is associated with abrupt onset of fever, without notable URTI signs and symptoms. Fever characteristically disappears by day 3 followed by the appearance of pale pink rashes which last for 2 days. It is associated with an enanthem called Nagayama spots in almost 2/3rd of cases that consist of erythematous papules on the mucosa of the soft palate and the base of the uvula.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In a 12-year-old child with fever and sore throat, ampicillin was prescribed which was followed by the appearance of rashes on the body after the 5th day. Which infection is the child likely to be suffering from?", "options": [{"label": "A", "text": "Tuberculosis", "correct": false}, {"label": "B", "text": "Infectious mononucleosis", "correct": true}, {"label": "C", "text": "Scarlet fever", "correct": false}, {"label": "D", "text": "Toxoplasmosis", "correct": false}], "correct_answer": "B. Infectious mononucleosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Infectious mononucleosis Infectious mononucleosis is a common infection usually caused by the Epstein-Barr virus (EBV). It is commonly seen in adolescents, although infection can develop in younger age groups as well. A significant percentage of affected children develop erythematous macular or papular eruptions after administration of amoxicillin or ampicillin antibiotics, usually 5-9 days after starting these antibiotics. The eruptions appear to be related to ampicillin-antibody immune complexes due to B cell activation and may not represent a “true” drug allergy.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-day-old neonate born to a mother with rubella infection during pregnancy develops red-purple macules and small plaques almost immediately after birth, mainly present on the trunk. The most likely cause of these lesions is", "options": [{"label": "A", "text": "Direct rubella virus-induced injury", "correct": false}, {"label": "B", "text": "Hypothermia", "correct": false}, {"label": "C", "text": "Immature autonomic nervous system control", "correct": false}, {"label": "D", "text": "Dermal hematopoiesis", "correct": true}], "correct_answer": "D. Dermal hematopoiesis", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884426613-QTDK044012IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Dermal hematopoiesis These are blueberry muffins. One of the sites of extramedullary hematopoiesis, a normal phenomenon during embryologic development till 5 months of gestation, is the dermis.</p>\n<p><strong>Highyeild:</strong></p><p>Prolonged dermal hematopoiesis extending after birth leads to blueberry muffin lesions on the neonate. These lesions are non-blanching; they either appear as blue-red coloured macules or dome-shaped papules, majorly present on the trunk, head, and neck. This term was coined by paediatricians to describe cutaneous manifestations observed in newborns infected with rubella during the American epidemic of the 1960s. Overall, blueberry muffins are associated with either congenital (TORCH) infections or hematologic dyscrasias (such as hemolysis due to ABO/Rh incompatibility). The only TORCH infections that are associated with these lesions are rubella and CytomegaloVirus(CMV).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following statements about congenital rubella are true except", "options": [{"label": "A", "text": "IgM antibody is present at birth", "correct": false}, {"label": "B", "text": "IgG antibodies persist for more than 6 months", "correct": false}, {"label": "C", "text": "The most common Congenital Heart Disorder (CHD) is Patent Ductus Arteriosus (PDA)", "correct": false}, {"label": "D", "text": "Sensorineural deafness is uncommon", "correct": true}], "correct_answer": "D. Sensorineural deafness is uncommon", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Sensorineural deafness is uncommon Diagnosis of congenital rubella infection can be made based on the presence of Immunoglobulin M(IgM) antibody titers (that do not cross the placenta, therefore always diagnostic if present at birth); or persistence of IgG antibody titers (which can cross the placenta) for more than 6 months.</p>\n<p><strong>Highyeild:</strong></p><p>Congenital heart defects are common in congenital rubella syndrome; the most common being Patent Ductus Arteriosus (PDA) and the least common being Atrial Septal Defect (ASD). Classical triad of congenital rubella- deafness, cataract and congenital heart disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most infectious stage of pertussis in children is", "options": [{"label": "A", "text": "Catarrhal stage", "correct": true}, {"label": "B", "text": "Paroxysmal stage", "correct": false}, {"label": "C", "text": "Convalescent stage", "correct": false}, {"label": "D", "text": "Pertussis is non-infectious", "correct": false}], "correct_answer": "A. Catarrhal stage", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Catarrhal stage Pertussis is a childhood bacterial infection involving the respiratory tract; and is most commonly caused by Bordetella pertussis. Less commonly B. parapertussis can also be the cause of this infection.</p>\n<p><strong>Highyeild:</strong></p><p>It spreads by droplet infection. Pertussis has three stages; the catarrhal stage (first stage), the paroxysmal stage (second stage), and the convalescent stage (third stage). Catarrhal stage of pertussis characterized by the presence of catarrhal symptoms (upper respiratory symptoms) is the most infectious stage. Paroxysmal stage lasts 2-6 weeks- characterised by a ‘ whoop’ sound In the convalescent phase- intensity and paroxysms of cough decrease</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The dose of rifampicin for treating childhood tuberculosis is", "options": [{"label": "A", "text": "5-10 mg/kg/day", "correct": false}, {"label": "B", "text": "10-20 mg/kg/day", "correct": true}, {"label": "C", "text": "15-25 mg/kg/day", "correct": false}, {"label": "D", "text": "20-25 mg/kg/day", "correct": false}], "correct_answer": "B. 10-20 mg/kg/day", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>10-20 mg/kg/day The doses of antitubercular drugs in children are Medication Dosage (mg/kg/day) Isoniazid 10-15 Rifampicin 10-20 Ethambutol 15-25 Pyrazinamide 25-35</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The dose of Isoniazid (INH) for treating childhood tuberculosis is", "options": [{"label": "A", "text": "10-15 mg/kg/day", "correct": true}, {"label": "B", "text": "10-20 mg/kg/day", "correct": false}, {"label": "C", "text": "15-25 mg/kg/day", "correct": false}, {"label": "D", "text": "5-10 mg/kg/day", "correct": false}], "correct_answer": "A. 10-15 mg/kg/day", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>10-15 mg/kg/day The doses of antitubercular drugs in children are Medication Dosage (mg/kg/day) Isoniazid 10-15 Rifampicin 10-20 Ethambutol 15-25 Pyrazinamide 25-35</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6-year-old child developed a fever 5 days back followed by the appearance of rashes about 2 days after the onset of the fever that started as small bumps over the trunk and later spread to become blisters containing clear fluid initially, however, in many blisters, the fluid has now turned cloudy. The child has currently been kept in isolation. When earliest can this child mix with his younger sibling?", "options": [{"label": "A", "text": "When all blisters have cloudy fluid", "correct": false}, {"label": "B", "text": "When fever disappears", "correct": false}, {"label": "C", "text": "When scabs are formed", "correct": true}, {"label": "D", "text": "Child is non-infective when cloudy fluid starts forming", "correct": false}], "correct_answer": "C. When scabs are formed", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>When scabs are formed This is a child having chicken pox. Chickenpox is acquired by inhalation of infected aerosolized droplets; it is highly contagious and can spread rapidly by coming in contact with the fluid in the blisters as well. A child of chicken pox becomes non-infectious when fluid in the blisters dries and scabs are formed.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is the most common complication of chickenpox in children?", "options": [{"label": "A", "text": "Meningoencephalitis", "correct": false}, {"label": "B", "text": "Cerebellar ataxia", "correct": false}, {"label": "C", "text": "Pneumonia", "correct": false}, {"label": "D", "text": "Superadded infections", "correct": true}], "correct_answer": "D. Superadded infections", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Superadded infections Chicken pox is a common childhood viral exanthem. In otherwise healthy children, it is usually mild, self-limiting, and rarely associated with complications. Overall the most common complication of chickenpox in children is superadded infections. Pneumonia is the most serious complication in adults. Cerebellar ataxia, meningoencephalitis and transverse myelitis are CENTRAL NERVOUS SYSTEM (CNS) complications; among which cerebellar ataxia is possibly the most commonly occurring.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Heterophile antibody test has been used for diagnosing", "options": [{"label": "A", "text": "Erythema toxicum", "correct": false}, {"label": "B", "text": "Hand foot and mouth disease", "correct": false}, {"label": "C", "text": "Scarlet fever", "correct": false}, {"label": "D", "text": "Infectious mononucleosis", "correct": true}], "correct_answer": "D. Infectious mononucleosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Infectious mononucleosis Heterophile antibody test is a rapid test used for diagnosing infectious mononucleosis due to Epstein Barr virus (EBV) infection. Heterophile test antibodies are sensitive and specific for Epstein-Barr virus (EBV) heterophile antibodies; peaking at 2-6 weeks after primary Epstein-Barr virus(EBV) infection. The test therefore can be negative early in the course of this infection however chances of positive test increases during the first 6 weeks of the illness.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The GeneXpert (Mycobacterium tuberculosis) MTB/RIF (resistance to rifampicin) assay for tuberculosis detection is an", "options": [{"label": "A", "text": "ELISA-based test", "correct": false}, {"label": "B", "text": "Culture-based assay", "correct": false}, {"label": "C", "text": "Interferon-gamma release assay IGRA-based assay", "correct": false}, {"label": "D", "text": "Nucleic acid amplification assay", "correct": true}], "correct_answer": "D. Nucleic acid amplification assay", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nucleic acid amplification assay Diagnosis of tuberculosis in children has been challenging, particularly because of the paucibacillary nature of the disease and minimal symptoms in children. Several molecular assays have been developed in the last few years that can reliably detect tuberculosis and drug resistance in a clinical specimen. One such test is the GeneXpert (Mycobacterium tuberculosis) MTB/RIF (Resistance to rifampicin) assay which is a novel integrated diagnostic test that can simultaneously identify Mycobacterium tuberculosis complex and resistance to rifampicin rapidly, often in less than 2 hours. This test is a nucleic acid amplification test that uses a disposable cartridge with the GeneXpert Instrument System.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most commonly used specimen for diagnosis of pertussis in children is", "options": [{"label": "A", "text": "Blood sample", "correct": false}, {"label": "B", "text": "Nasopharyngeal swab", "correct": true}, {"label": "C", "text": "Urine sample", "correct": false}, {"label": "D", "text": "Sputum sample", "correct": false}], "correct_answer": "B. Nasopharyngeal swab", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nasopharyngeal swab The case definition of pertussis involves the presence of one or more typical clinical symptoms, such as paroxysmal cough for at least 2 weeks, inspiratory whoop, post-tussive emesis, and sometimes, apnea and/or cyanosis. Nasopharyngeal specimens are the best for establishing the diagnosis and can be obtained either using a nasopharyngeal swab or by cough plate cultured on Bordet – Gengou medium While sampling of aspirates gives higher yields, it is cumbersome and requires skilled personnel. On the other hand, nasopharyngeal swabs are easy to obtain and are most commonly used. The fluorescent-antibody assay of nasopharyngeal samples is a rapid and reliable method to diagnose pertussis. Other diagnostic tests including serology and Polymerase chain reaction (PCR) in throat swabs are not routinely available</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "IgG transfer across the placenta is dependent on all of these factors except", "options": [{"label": "A", "text": "Gestational age", "correct": false}, {"label": "B", "text": "Subtype of IgG", "correct": false}, {"label": "C", "text": "Placental integrity", "correct": false}, {"label": "D", "text": "Fetus size", "correct": true}], "correct_answer": "D. Fetus size", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Fetus size Maternal antibodies are an important method of providing passive immunity to developing fetuses and protecting them from infections. Immunoglobulin (IgG) antibodies are transferred; and not Immunoglobulin (IgM). Transfer of these antibodies occurs through the placenta mainly via the neonatal Fc receptor, and the transfer depends on several factors including placenta integrity, gestational maturity, a subclass of IgG, and maternal antibody concentration. In humans, maternal antibody transfer starts as early as week 13 of gestation. The level of IgG in fetal circulation is dependent on gestation, being 50 % of the maternal level by week 32 and usually exceeding the maternal level at delivery. Not all antibodies against different pathogens can be transferred; an example is antibodies against pertussis do not cross the placenta leaving the neonate exposed to pertussis infection around birth and necessitating vaccination (active protection).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which childhood infection has also been called the “100 days cough”?", "options": [{"label": "A", "text": "Tuberculosis", "correct": false}, {"label": "B", "text": "Tetanus", "correct": false}, {"label": "C", "text": "Diphtheria", "correct": false}, {"label": "D", "text": "Pertussis", "correct": true}], "correct_answer": "D. Pertussis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pertussis “100 days cough” is a name attributed to pertussis or whooping cough in some parts of the world; although it has been debated by some experts on the grounds that paroxysmal cough even if prolonged in pertussis, rarely lasts for more than 2 months.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following complications are commonly seen in measles except", "options": [{"label": "A", "text": "Otitis media", "correct": false}, {"label": "B", "text": "Diarrhea", "correct": false}, {"label": "C", "text": "Respiratory Infection", "correct": false}, {"label": "D", "text": "Subacute sclerosing panencephalitis (SSPE)", "correct": true}], "correct_answer": "D. Subacute sclerosing panencephalitis (SSPE)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Subacute sclerosing panencephalitis (SSPE) Measles can be associated with several complications. These complications are commonly seen in young children, those who are immunocompromised and/or malnourished. Overall, otitis media is the most common complication, with others being diarrhoea, croup, encephalitis, and pneumonia. Measles pneumonia can be a result of direct virus-induced injury or can be secondary to superadded bacterial infections. Pneumonia is responsible for most measles-associated morbidity and mortality. Subacute sclerosing panencephalitis (SSPE) is an extremely rare complication of measles presenting as a progressive neurological disease about 5-10 years after the illness and is thought to be caused by an abnormal host response to the production of mutated virions.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "False statement about mumps in children", "options": [{"label": "A", "text": "Incubation period 2-3 days", "correct": true}, {"label": "B", "text": "Parotitis is the most common manifestation", "correct": false}, {"label": "C", "text": "Parotid swelling can be unilateral or bilateral", "correct": false}, {"label": "D", "text": "Epididymo- orchitis is common in adolescent boys", "correct": false}], "correct_answer": "A. Incubation period 2-3 days", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Incubation period 2-3 days Mumps is a common viral infection caused by an RNA virus belonging to the paramyxoviridae family. Its incubation period is 2-4 weeks. Parotitis is the most common manifestation of the virus (although other salivary glands can also be affected). Parotid swelling can be unilateral or bilateral. Orchitis is a common complication of mumps that presents with painful swelling, enlargement, and tenderness of the testes common in adolescents Neurological complications include meningoencephalitis, 8th nerve damage, cerebellar ataxia, transverse myelitis, and Guillain-Barre syndrome. Pancreatitis can also develop. Overall, the most common complication of mumps in children is meningoencephalitis; however, the most common complication in pubertal children is orchitis (or epididymo-orchitis).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Cerebral atrophy, limb abnormalities and scarring on the skin are associated with which congenital infection?", "options": [{"label": "A", "text": "Congenital syphilis", "correct": false}, {"label": "B", "text": "Congenital herpes", "correct": false}, {"label": "C", "text": "Congenital toxoplasmosis", "correct": false}, {"label": "D", "text": "Congenital varicella", "correct": true}], "correct_answer": "D. Congenital varicella", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Congenital varicella Congenital varicella syndrome is mainly a consequence of maternal varicella infection during the first two trimesters of pregnancy. This congenital infection includes a constellation of multi-systemic findings including scars in a dermatomal distribution (often the most common presentation); skeletal abnormalities particularly limb abnormalities, brain damage due to cerebral atrophy, and eye involvement.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The most common congenital infection in newborns is", "options": [{"label": "A", "text": "Toxoplasmosis", "correct": false}, {"label": "B", "text": "Rubella", "correct": false}, {"label": "C", "text": "Cytomegalovirus (CMV)", "correct": true}, {"label": "D", "text": "Herpes simplex", "correct": false}], "correct_answer": "C. Cytomegalovirus (CMV)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Cytomegalovirus (CMV) Congenital CMV infection is believed to be the overall most common congenital infection in children.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A neonate is born with features of microcephaly, Intrauterine growth restriction(IUGR), intracranial calcifications, ventriculomegaly, pericardial effusion, and ascites. The mother had a history of Cytomegalovirus (CMV) infection during pregnancy. The antiviral treatment of choice and duration of treatment in this neonate is", "options": [{"label": "A", "text": "Aciclovir for 3 weeks", "correct": false}, {"label": "B", "text": "Ganciclovir for 6 weeks", "correct": true}, {"label": "C", "text": "Foscarnet for 12 weeks", "correct": false}, {"label": "D", "text": "None of these", "correct": false}], "correct_answer": "B. Ganciclovir for 6 weeks", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Ganciclovir for 6 weeks Ganciclovir, valganciclovir, and foscarnet have been used for treating CMV infection. Traditionally the drug most commonly used for treating congenital CMV infection is ganciclovir given for a duration of 6 weeks. More recently, reports have surfaced that show the superiority of oral valganciclovir over IV ganciclovir, particularly because the latter is often associated with bone marrow suppression and gonadal toxicity.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these infections in children is associated with the “Saber shin” defect?", "options": [{"label": "A", "text": "Hepatitis B", "correct": false}, {"label": "B", "text": "Hand foot and mouth disease", "correct": false}, {"label": "C", "text": "Lyme disease", "correct": false}, {"label": "D", "text": "Syphilis", "correct": true}], "correct_answer": "D. Syphilis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Syphilis “Saber shin” is a malformation involving a sharp anterior bowing (or convexity) of the tibia. The infection with which it is often associated is late-stage of syphilis. It however may also be seen in a variety of other diseases which cause bone softening.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is not a feature of “Hutchinson’s triad”?", "options": [{"label": "A", "text": "Interstitial keratitis", "correct": false}, {"label": "B", "text": "Hutchinson’s teeth", "correct": false}, {"label": "C", "text": "Sensorineural deafness", "correct": false}, {"label": "D", "text": "Pancytopenia", "correct": true}], "correct_answer": "D. Pancytopenia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pancytopenia Hutchinson’s triad” is a triad of malformations seen in congenital syphilis. It includes interstitial keratitis, eighth nerve deafness and Hutchinson's teeth.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of these is the most common mode of acquisition of HIV infection in newborns?", "options": [{"label": "A", "text": "Intrauterine", "correct": false}, {"label": "B", "text": "Intrapartum", "correct": true}, {"label": "C", "text": "Breastfeeding", "correct": false}, {"label": "D", "text": "Blood transfusion", "correct": false}], "correct_answer": "B. Intrapartum", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Intrapartum Mother-to-child-transmission (MTCT) either during pregnancy, labour or during breastfeeding is the main cause of HIV infection in children, accounting for over 90 % of all childhood HIV infections.</p>\n<p><strong>Highyeild:</strong></p><p>Among these intrapartum/peripartum transmission is most important, followed by intrauterine and then breastfeeding. The overall risk of HIV transmission from mother to child through breastfeeding is small, though not totally absent. However in view of the several advantages of breastfeeding and the fact that if a pregnant woman is receiving antiretroviral therapy started early in pregnancy risk of transmission of the HIV virus through breast milk is greatly reduced, breastfeeding (exclusive breastfeeding for the first 6 months) with concurrent antiretroviral interventions maximally increase the chance of HIV-free survival in the newborn and is currently recommended in India. Complementary foods should be introduced at 6 months of age while continuing to breastfeed till the child is 12-24 months.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the currently recommended infant feeding practice in India for children born to HIV-positive mothers?", "options": [{"label": "A", "text": "Mixed feeding (breastfeeding + complimentary food) from birth", "correct": false}, {"label": "B", "text": "Breastfeeding should be best avoided", "correct": false}, {"label": "C", "text": "Exclusive breastfeeding for 6 months followed by weaning", "correct": true}, {"label": "D", "text": "Early interruption of exclusive breastfeeding (4 months) followed by rapid withdrawal of breast milk", "correct": false}], "correct_answer": "C. Exclusive breastfeeding for 6 months followed by weaning", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Exclusive breastfeeding for 6 months followed by weaning Mother-to-child-transmission (MTCT) either during pregnancy, labour or during breastfeeding is the main cause of HIV infection in children, accounting for over 90 % of all childhood HIV infections. Among these intrapartum/peripartum transmission is most important, followed by intrauterine and then breastfeeding. The overall risk of HIV transmission from mother to child through breastfeeding is small, though not totally absent. However in view of the several advantages of breastfeeding and the fact that if a pregnant woman is receiving antiretroviral therapy started early in pregnancy risk of transmission of the HIV virus through breast milk is greatly reduced, breastfeeding (exclusive breastfeeding for the first 6 months) with concurrent antiretroviral interventions maximally increase the chance of HIV-free survival in the newborn and is currently recommended in India. Complementary foods should be introduced at 6 months of age while continuing to breastfeed till the child is 12-24 months.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The drug currently recommended for the prevention of mother-to-child transmission of HIV is", "options": [{"label": "A", "text": "Zidovudine", "correct": false}, {"label": "B", "text": "Nevirapine", "correct": true}, {"label": "C", "text": "Lamivudine", "correct": false}, {"label": "D", "text": "Didanosine", "correct": false}], "correct_answer": "B. Nevirapine", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nevirapine According to current recommendations, all pregnant and breastfeeding women living with HIV should be provided lifelong antiretroviral therapy regardless of their CD4 counts or clinical stage. To protect infants born to these women, daily doses of nevirapine should be started from birth till 6 weeks; the duration of nevirapine prophylaxis should be increased to 12 weeks if antiretroviral therapy is started late in pregnancy, during or after delivery.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 16-month-old child with an infectious viral exanthem is shown. What can be the most likely causative agent for this infection", "options": [{"label": "A", "text": "Epstein Barr Virus (EBV)", "correct": false}, {"label": "B", "text": "Parvovirus B19", "correct": true}, {"label": "C", "text": "Human Papillomavirus (HHV6)", "correct": false}, {"label": "D", "text": "Measles virus", "correct": false}], "correct_answer": "B. Parvovirus B19", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884426693-QTDK044037IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Parvovirus B19 This picture shows a child with a “slapped cheek appearance”. Since this form of rash is seen in erythema infectiosum, the most likely cause of this infection is Parvovirus B19.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Wrong statement about childhood tuberculosis", "options": [{"label": "A", "text": "Most cases are subclinical", "correct": false}, {"label": "B", "text": "Paucibacillary disease", "correct": false}, {"label": "C", "text": "Pediatric TB cases form &lt; 1% of total TB cases", "correct": true}, {"label": "D", "text": "Most common site of involvement in extrapulmonary tuberculosis is lymph node", "correct": false}], "correct_answer": "C. Pediatric TB cases form < 1% of total TB cases", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pediatric TB cases form &lt; 1% of total TB cases Pediatric tuberculosis is not an uncommon illness and childhood tuberculosis forms about 10% of total tuberculosis cases worldwide. Tuberculosis in children usually occurs as a paucibacillary disease; hence most children acquire tuberculosis infection from adults. Diagnosis of tuberculosis in children is challenging as most affected children are either asymptomatic or have minimal clinical symptoms. While the lungs are the most commonly affected site in tuberculosis, the most common site of extrapulmonary involvement in children is the lymph nodes.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Splenic rupture is rare, yet a dreaded complication of which of these infections?", "options": [{"label": "A", "text": "Infectious mononucleosis", "correct": true}, {"label": "B", "text": "Lyme’s disease", "correct": false}, {"label": "C", "text": "Chicken pox", "correct": false}, {"label": "D", "text": "Mumps", "correct": false}], "correct_answer": "A. Infectious mononucleosis", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Infectious mononucleosis Splenic rupture is a rare yet dreaded complication of infectious mononucleosis. The mechanism of this complication remains controversial, although it may be related to increasing in intra-abdominal pressure or contraction of the diaphragm with vigorous cough, vomiting and defecation, leading to a compression of the spleen. Other complications include- airway obstruction due to enlargement of oropharyngeal lymphoid tissue, meningitis, seizures, ataxia, myocarditis, hemolytic anaemia, and thrombocytopenia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Match the following. Select the correct answer from the given below code:", "options": [{"label": "A", "text": "1b, 2a, 3c, 4d", "correct": true}, {"label": "B", "text": "1b, 2c, 3a, 4d", "correct": false}, {"label": "C", "text": "1a, 2b, 3d, 4c", "correct": false}, {"label": "D", "text": "1d, 2c, 3a, 4b", "correct": false}], "correct_answer": "A. 1b, 2a, 3c, 4d", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/questionImage-1689445273289-QTDK044042IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1b, 2a, 3c, 4d Koplik spots seen in measles appear a few days after the symptoms on the opposite and lower molar near Stimson's line. They are white/grey sand-like lesions. Nagayama spots are enanthemia seen on the uvula/palate in the sixth disease. Slapped cheek appearance is characteristic of the fifth disease. Forchheimer spot Seen in rubella. Slapped cheek appearance</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child presents to the pediatric OPD with complaints of fever for 1 week along with cough and redness in the eye. The mother notices a rash in the child which starts from the face and spreads down. What is your provisional diagnosis?", "options": [{"label": "A", "text": "Measles", "correct": true}, {"label": "B", "text": "Chicken pox", "correct": false}, {"label": "C", "text": "Mumps", "correct": false}, {"label": "D", "text": "Fifth disease", "correct": false}], "correct_answer": "A. Measles", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Measles Measles presents with prodromal symptoms of fever with cough, coryza, and conjunctivitis (3C). The characteristic rash of measles presents 4 days after the fever and usually starts from the face and spreads downwards. Chicken pox presents with a rash which usually starts from the trunk and spreads to the extremities. Mumps usually present with painful enlargement of salivary glands. Fifth disease has a characteristic slapped cheek appearance.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A concerned mother brought her child to your pediatric OPD because she noticed a rash behind the child’s ear while giving a bath and it was spreading down in the following days. She gives a history that the child had been running a fever for the past few days. You explain to her the diagnosis and treatment plans when she wants to know when will the child be infectious.", "options": [{"label": "A", "text": "About 4 days before and 5 days after the rash", "correct": true}, {"label": "B", "text": "1-2 days before rash till scabs appear", "correct": false}, {"label": "C", "text": "For 7 days", "correct": false}, {"label": "D", "text": "Child will be non-infectious", "correct": false}], "correct_answer": "A. About 4 days before and 5 days after the rash", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>About 4 days before and 5 days after the rash Measles presents with prodromal symptoms of fever with cough, coryza, and conjunctivitis (3C). The characteristic rash of measles presents 4 days after the fever and usually starts from the face, behind the ear and spreads downwards. A child with measles is infectious about 4 days before and 5 days after the rash.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option B. 1-2 days before the rash till scabs appear are the infectious phase for chicken pox Options C and D. Are false as measles is an infectious disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following statements is not true with respect to chicken pox?", "options": [{"label": "A", "text": "Incubation period is 10-21 days", "correct": false}, {"label": "B", "text": "It is caused by RNA virus", "correct": true}, {"label": "C", "text": "It is infectious till scabs appear", "correct": false}, {"label": "D", "text": "Papules, vesicles and scabs are seen", "correct": false}], "correct_answer": "B. It is caused by RNA virus", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>It is caused by RNA virus The incubation period of chickenpox is 10-21 days and it is caused by varicella zoster virus which is a DNA virus (not RNA). It is infectious till the vesicles are crusted and scabs appear. The rash rapidly spreads to the face and extremities while it evolves into papules, vesicles and scabs. Management is symptomatic.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 48 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 25 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "Which of the following is the earliest symptom to occur in vitamin A deficiency?", "options": [{"label": "A", "text": "Xerophthalmia", "correct": false}, {"label": "B", "text": "Night blindness", "correct": true}, {"label": "C", "text": "Photophobia", "correct": false}, {"label": "D", "text": "Bitot’s spots", "correct": false}], "correct_answer": "B. Night blindness", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Night blindness Defective dark adaptation is a characteristic early clinical feature of vitamin A deficiency , resulting in night blindness. Eye changes normally develop after 2 years.</p>\n<p><strong>Highyeild:</strong></p><p>The ocular epithelium becomes dry (xerophthalmia) and hyper keratinised with the appearance of small foam-like silvery lesions on the conjunctiva (Bitot spots). More severe Vitamin A deficiency leads to hyper keratinisation of the cornea with the appearance of corneal opacity , which can progress to ulceration and infection (keratomalacia).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A child with severe acute malnutrition has been admitted to the ward with pneumonia. On examination, there are corneal opacities and ulceration involving less than 1/3rd of the cornea. Vitamin A deficiency is suspected. How will you classify these eye changes according to WHO classification?", "options": [{"label": "A", "text": "XS", "correct": false}, {"label": "B", "text": "X2", "correct": false}, {"label": "C", "text": "X3A", "correct": true}, {"label": "D", "text": "X3B", "correct": false}], "correct_answer": "C. X3A", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>X3A WHO CLASSIFICATION OF EYE CHANGES IN VITAMIN A DEF: X1a- conjunctival xerosis X1b – BITOT spots X2- corneal xerosis X3a- corneal ulcer &lt; 1/3 of the cornea X3b – corneal ulcer &gt;1/3 of the cornea XN – night blindness XF- xerophthalmic fundus XS – corneal scarring</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Infantile beriberi is caused by which vitamin deficiency?", "options": [{"label": "A", "text": "Thiamine", "correct": true}, {"label": "B", "text": "Riboflavin", "correct": false}, {"label": "C", "text": "Vit. B12", "correct": false}, {"label": "D", "text": "Niacin", "correct": false}], "correct_answer": "A. Thiamine", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Thiamine Thiamine deficiency results in beriberi Three forms of beriberi are described: Dry, wet and infantile</p>\n<p><strong>Highyeild:</strong></p><p>Dry beriberi manifests as peripheral neuritis with irritability, paralysis of lower limbs, loss of deep tendon jerks, muscle wasting and loss of position sense. Wet beriberi is characterised by congestive heart failure and peripheral edema Infantile beriberi occurring in breastfed infants of thiamine-deficient mothers presents with cardiomegaly, dyspnea, and cyanosis.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In which vitamin deficiency, the classical skin lesions shown below will be seen", "options": [{"label": "A", "text": "Thiamine", "correct": false}, {"label": "B", "text": "Riboflavin", "correct": false}, {"label": "C", "text": "Niacin", "correct": true}, {"label": "D", "text": "Vit. B12", "correct": false}], "correct_answer": "C. Niacin", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882853719-QTDK010006IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Niacin This is Casal necklace appearance Characteristic skin lesions of pellagra include those on the hands and the neck due to niacin deficiency.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "All of the following are classical features of pellagra except", "options": [{"label": "A", "text": "Diarrhea", "correct": false}, {"label": "B", "text": "Dermatitis", "correct": false}, {"label": "C", "text": "Dementia", "correct": false}, {"label": "D", "text": "Dilated cardiomyopathy", "correct": true}], "correct_answer": "D. Dilated cardiomyopathy", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Dilated cardiomyopathy Niacin deficiency leads to pellagra which is characterised by three Ds: dermatitis, diarrhoea and dementia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which vitamin deficiency can cause refractory seizures in the neonatal period?", "options": [{"label": "A", "text": "Vitamin B2", "correct": false}, {"label": "B", "text": "Pyridoxine", "correct": true}, {"label": "C", "text": "Niacin", "correct": false}, {"label": "D", "text": "Biotin", "correct": false}], "correct_answer": "B. Pyridoxine", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pyridoxine Pyridoxine deficiency may cause peripheral neuropathy , refractory seizures, dermatitis and microcytic anaemia. Refractory seizures more common in neonates with this deficiency For refractory seizure due to pyridoxine deficiency, 100 mg of pyridoxine is injected intramuscularly</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "In classical hemorrhagic disease of newborns, bleeding occurs on which day/week of life?", "options": [{"label": "A", "text": "Day 1", "correct": false}, {"label": "B", "text": "2- 14 day", "correct": true}, {"label": "C", "text": "After 2 weeks", "correct": false}, {"label": "D", "text": "After 6 months", "correct": false}], "correct_answer": "B. 2- 14 day", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>2- 14 day Early or classical Hemolytic disease of newborn( HDN) - bleeding occurs between 2-14 days Late Hemolytic disease of the newborn ( HDN) - bleeding occurs after 2 weeks and can be as late as 6 months. Hemolytic disease of the newborn ( HDN) - immediately after birth on day 1 due to maternal drug intake, which can interfere with vitamin K metabolism.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which of the following coagulation abnormalities will be seen in vitamin K deficiency?", "options": [{"label": "A", "text": "Prolonged Prothrombin time (PT) only", "correct": false}, {"label": "B", "text": "Prolonged Activated partial thromboplastin clotting time (APTT) only", "correct": false}, {"label": "C", "text": "Prolonged Prothrombin time (PT) &amp; APTT, normal platelets", "correct": true}, {"label": "D", "text": "Prolonged Prothrombin time (PT) &amp; Activated partial thromboplastin clotting time (APTT), abnormal platelets", "correct": false}], "correct_answer": "C. Prolonged Prothrombin time (PT) & APTT, normal platelets", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Prolonged Prothrombin time (PT) &amp; APTT, normal platelets Factors 2,7, 9 and 10 are vitamin K dependant clotting factors Factors 2,7, 9 and 10 are vitamin K dependant clotting factors</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3 years old male child presents with irritability, loss of appetite, low-grade fever, musculoskeletal pain with swelling of both ankle and knee joints, and inability to move legs. O/E few petechial spots were seen on the skin, and one non-healing ulcer was noted. Investigations: Hb- 6g/dl, TLC – 11,000, platelets - 1,99,000. X-ray of the legs shown below. What is the diagnosis", "options": [{"label": "A", "text": "Rickets", "correct": false}, {"label": "B", "text": "Scurvy", "correct": true}, {"label": "C", "text": "Leukemia", "correct": false}, {"label": "D", "text": "Juvenile idiopathic arthritis", "correct": false}], "correct_answer": "B. Scurvy", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882853772-QTDK010011IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Scurvy The characteristic clinical picture of Pseudoparalysis and examination findings of non-healing ulcer and petechial spots, along with this characteristic X-ray picture, confirm the diagnosis of scurvy. X-ray findings: Ground glass appearance of the shaft – due to trabecular atrophy Pencil outlining of diaphysis and epiphysis – due to thin and dense cortex The white line of Frankel – is irregular, but the thickened white line at the metaphysis Zone of rarefaction (Trümmerfeld zone) – linear break in the bone that is proximal and parallel to the white line Pelkan spur – lateral projection of the white line Wimberger’s ring – ring of increased opacity around the epiphyseal ossification centre</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "An infant is brought with h/o irritability, bleeding from the gums and petechial spots over the skin. On examination, tender swellings were present on the anterior ribs at the costochondral junction. The swellings were sharp and angular. These swellings at the costochondral junction are most likely", "options": [{"label": "A", "text": "Rachitic rosary", "correct": false}, {"label": "B", "text": "Scorbutic rosary", "correct": true}, {"label": "C", "text": "Chondrodystrophy", "correct": false}, {"label": "D", "text": "Child abuse", "correct": false}], "correct_answer": "B. Scorbutic rosary", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Scorbutic rosary Characteristic angular swellings at the costochondral junction, which is tender and is usually indicative of scorbutic rosary In the rachitic rosary, swelling is non-tender and rounded (or dome-shaped) but not angular.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Which type of rickets is associated with alopecia?", "options": [{"label": "A", "text": "Vitamin D-dependent rickets type 1 (VDDR type 1)", "correct": false}, {"label": "B", "text": "Vitamin D-dependent rickets type 2 (VDDR type 2)", "correct": true}, {"label": "C", "text": "Hypophosphatemic rickets", "correct": false}, {"label": "D", "text": "Nutritional rickets", "correct": false}], "correct_answer": "B. Vitamin D-dependent rickets type 2 (VDDR type 2)", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Vitamin D-dependent rickets type 2 (VDDR type 2) There is end-organ resistance to 1,25(0H)2A VIT D3 in vitamin D dependent rickets (VDDR) type 2 Early onset of rickets, a high prevalence of alopecia and ectodermal defects (oligodontia, milia and epidermal cysts) are characteristic features of Vitamin D-dependent rickets type 2 (VDDR type 2)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The earliest feature of rickets to occur is", "options": [{"label": "A", "text": "Rickety rosary", "correct": false}, {"label": "B", "text": "Craniotabes", "correct": true}, {"label": "C", "text": "Bow legs", "correct": false}, {"label": "D", "text": "Harrison's sulcus", "correct": false}], "correct_answer": "B. Craniotabes", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Craniotabes Craniotabes or the soft skull bone is the earliest change seen in rickets. Bow legs are physiological till 2 years of age; however, their persistence in children over 2 years should be evaluated. Rachitic rosary and Harrison sulcus develop as later manifestations.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The type of chest deformity seen in rickets is", "options": [{"label": "A", "text": "Pectus carinatum", "correct": true}, {"label": "B", "text": "Pectus excavatum", "correct": false}, {"label": "C", "text": "Pectus arcuatum", "correct": false}, {"label": "D", "text": "Barrel-shaped chest", "correct": false}], "correct_answer": "A. Pectus carinatum", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Pectus carinatum Pectus carinatum or pigeon chest is characteristic of rickets Along with pectus carinatum, rickets is also associated with other features, including this anterior beading of ribs and Harrison sulcus in the lower chest</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "This is the X-ray of a child of short height for their age. The child’s growth velocity was slow, and the parent's height was normal. What is your tentative diagnosis?", "options": [{"label": "A", "text": "Scurvy", "correct": false}, {"label": "B", "text": "Hyperparathyroidism", "correct": false}, {"label": "C", "text": "Pseudohypoparathyroidism", "correct": false}, {"label": "D", "text": "Rickets", "correct": true}], "correct_answer": "D. Rickets", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882853824-QTDK010016IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Rickets This X-ray shows widening, cupping and fraying in the metaphysis, which is seen in rickets</p>\n<p><strong>Highyeild:</strong></p><p>Radiologic changes in rickets are characteristically seen at the metaphysis. The loss of the normal zone of provisional calcification adjacent to the metaphysis is seen as a blurring or a frayed appearance of the metaphyseal margin (fraying) Generalised reduction in bone density is also seen (osteopenia)</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-year-old child came with c/o widening of wrist and bowing of legs. H/o frequent falls present. On investigation S. Calcium is low, normal 25 OH vitamin D, low phosphate, and markedly low 1,25 (O.H)2 vitamin D. What is the likely diagnosis?", "options": [{"label": "A", "text": "Nutritional Rickets", "correct": false}, {"label": "B", "text": "Vit. D dependant rickets type 1", "correct": true}, {"label": "C", "text": "Vit. D dependant rickets type 2", "correct": false}, {"label": "D", "text": "Hypophosphatemic Rickets", "correct": false}], "correct_answer": "B. Vit. D dependant rickets type 1", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Vit. D dependant rickets type 1 VDDR type I: This condition is characterised by a deficiency of the enzyme 25-hydroxyvitamin D l alpha-hydroxylase.</p>\n<p><strong>Highyeild:</strong></p><p>The characteristics are reduced blood calcium levels, normal to low phosphate and elevated alkaline phosphatase. Blood levels of 25(0H)D 3 are normal but those of 1,25(0H} D 3 are markedly decreased despite hypocalcaemia. VDDR type II has end-organ resistance to 1,25(0H) vit. d3. This leads to the virtual abolition of actions of l,25 (0H)D3 , despite its markedly raised levels in circulation (secondary to hypocalcemia and low 24-hydroxylase activity).</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "What is the most common inheritance pattern of familial hypophosphatemic Rickets?", "options": [{"label": "A", "text": "Autosomal dominant", "correct": false}, {"label": "B", "text": "Autosomal recessive", "correct": false}, {"label": "C", "text": "X linked dominant.", "correct": true}, {"label": "D", "text": "X linked recessive", "correct": false}], "correct_answer": "C. X linked dominant.", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>X linked dominant. X-linked dominant is the most common inheritance pattern of familial hypophosphatemic rickets with variable penetrance. Rarely AR and sporadic forms occur.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Stoss therapy is used in the treatment of which vitamin deficiency?", "options": [{"label": "A", "text": "Vitamin A", "correct": false}, {"label": "B", "text": "Vitamin C", "correct": false}, {"label": "C", "text": "Vitamin D", "correct": true}, {"label": "D", "text": "Vitamin K", "correct": false}], "correct_answer": "C. Vitamin D", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Vitamin D Stoss therapy was previously used in the management of Vitamin D deficiency . It includes the administration of 60,000 IU of Vit. D daily or on alternative days to reach a max dose of 6,00,000 IU. Daily or weekly treatment with much lower doses is now recommended for vit D deficiency.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 6yr old presented with a history of loss of appetite and irritability for 2 months. He also complained of difficulty walking for 1 month, progressing gradually until he could just take a few steps. He also has an increased frequency of bedwetting at night time. His old reports say his vitamin levels were 13.5 ng/l, so he was prescribed cholecalciferol 60000 IU. Also, a general practitioner gave him injectable cholecalciferol 200000 IU. His laboratory findings reveal hypercalcemia with calcium and hypoparathyroidism with elevated vitamin D levels. Which of the following is the best treatment given for this condition now?", "options": [{"label": "A", "text": "Calcitriol", "correct": false}, {"label": "B", "text": "Calcitonin", "correct": true}, {"label": "C", "text": "Oral calcium 500 m g per day", "correct": false}, {"label": "D", "text": "Any of the above can be given", "correct": false}], "correct_answer": "B. Calcitonin", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Calcitonin Hypervitaminosis D is caused by excessive intake of vitamin D or its analogues.</p>\n<p><strong>Highyeild:</strong></p><p>It can occur with long-term high intake or substantial acute ingestion. Classic findings include hypercalcemia, elevated vitamin D levels, hypercalciuria and suppressed Parathyroid Hormone PTH levels. It leads to lethargy, polyuria, hallucinations, psychosis, poor feeding, dehydration, hypernatremia, and irritability. Hypercalcemia can lead to nephrolithiasis, nephrocalcinosis and acute renal failure. Treatment depends on lowering calcium levels by giving glucocorticoids, prednisolone 1 to 2 mg/kg/24hr and calcitonin, which lowers calcium by inhibiting bone resorption. Excellent response with I.V. or oral bisphosphonate in vitamin D intoxication.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3yr old girl was admitted to the clinic for recurrent, erythematous scaly lesions on face,arms, trunk and also the perianal region. She had developed several episodes of lesion since the age of one. Hair loss and mouth soreness were also reported. The dermatological examination showed erythematous, plaque-like, dry exanthematous lesions over the perioral region. Laboratory studies reveal 66 ug/dl zinc levels and Alkaline phosphatase (ALP) levels of 770u/l. Which of the following is the best treatment protocol for this condition?", "options": [{"label": "A", "text": "10 to 50mg/ day of pyridoxine is required to meet the demands", "correct": false}, {"label": "B", "text": "0.5mg/kg/day of elemental zinc is given to meet the demands", "correct": true}, {"label": "C", "text": "3.5 to 5.0 mg/ day of zinc is required to meet the demands", "correct": false}, {"label": "D", "text": "50 to 300mg /day of niacin required to meet the demands", "correct": false}], "correct_answer": "B. 0.5mg/kg/day of elemental zinc is given to meet the demands", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>0.5mg/kg/day of elemental zinc is given to meet the demands Acrodermatitis enteropathica is an autosomal recessive disorder due to severe zinc deficiency caused by impaired intestinal absorption due to a defect in intestinal zinc transporter protein.</p>\n<p><strong>Highyeild:</strong></p><p>Normal requirement for children range between 3.5 to 5.0mg/day. Acquired zinc deficiency can be treated with 0.5 to 1.0 mg elemental zinc/kg/day for several weeks/months. Malnourished children have much higher requirements of 2 to 4 mg/kg/day due to zinc depletion and intestinal disease. 1mg of elemental zinc is available from 4.5mg zinc sulfate/3mg zinc acetate.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 4yr old emaciated male child with loss of consciousness was brought to the emergency. His blood glucose upon arrival was noted as 20mg/dl. Subsequently, IV glucose was administered to the child. On physical examination, the child weighed about 13.7kg. His ribs and bones were prominent and subcutaneous fat was unidentifiable. Previous medical history revealed as he was undernourished at 2.5 years of age. He was started on a high diet aggressively. All of the following features are seen developed in refeeding syndrome except?", "options": [{"label": "A", "text": "Hyperphosphatemia", "correct": true}, {"label": "B", "text": "Hypophosphatemia", "correct": false}, {"label": "C", "text": "Hypokalemia", "correct": false}, {"label": "D", "text": "Hypomagnesemia", "correct": false}], "correct_answer": "A. Hyperphosphatemia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Hyperphosphatemia REFEEDING SYNDROME: It is It happens when energy-dense feeds at the beginning of treatment rather than gradually increasing. On consuming high-energy feeds, lots of calorie intake occurs, subsequently increasing insulin levels, which further causes three typical features like Hypokalemia Hypomagnesemia Hypophosphatemia Hallmark feature is hypophosphatemia . Clinical features include the presence of edema.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "You were posted in a rural area for evaluation of malnutrition children. You were asked to take readings of mid-upper arm circumference for a 3yr old girl child; the reading was around 10.5 cm. The above reading corresponds to which colour in the WHO MUAC tape?", "options": [{"label": "A", "text": "Red", "correct": true}, {"label": "B", "text": "Green", "correct": false}, {"label": "C", "text": "Yellow", "correct": false}, {"label": "D", "text": "Black", "correct": false}], "correct_answer": "A. Red", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Red Mid-upper arm circumference is measured in children between 6 to 60 months. It is measured between the acromion and olecranon processes. It is an age-independent parameter MUAC tape cutoff by WHO: Red = &lt; 11.5cm Yellow= 11.5 to 12.5cm Green = &gt; 12.5cm There are other evaluation methods like a. Bangle test, b. QUAC stick test, c. Skin fold thickness using harpinder callipers.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "Medical camp postings were conducted in refugee camps. A 15-year-old child complains of progressive dyspnea, leg oedema and muscle weakness for 3 weeks. The patient has a history of gastric ulcers and consumption of polished rice for many years. Physical examination revealed jugular venous distension. Chest X-ray shows cardiomegaly and pulmonary vascular congestion. Which of the following vitamin deficiency can cause this condition", "options": [{"label": "A", "text": "Vitamin B1", "correct": true}, {"label": "B", "text": "Vitamin A", "correct": false}, {"label": "C", "text": "Vitamin B6", "correct": false}, {"label": "D", "text": "Vitamin B12", "correct": false}], "correct_answer": "A. Vitamin B1", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882853907-QTDK010035IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Vitamin B1 Vitamin B1 deficiency: thiamine deficiency causes dry beriberi, wet beriberi and Wernicke encephalopathy.</p>\n<p><strong>Highyeild:</strong></p><p>Wet beriberi is associated with tachycardia, cardiomegaly, cardiac failure and edema. It is commonly seen in refugee camps where people consume polished rice. Diagnosis can be evaluated by erythrocyte transketolase activity assessment. Dry beriberi is associated with neurological deficits like peripheral neuropathy, ataxia, optic atrophy and irritability. Vitamin H or vitamin B7: deficiency causes dermatitis, atrophic glossitis, alopecia, paresthesia, muscle pain, anorexia hallucinations, and hypercholesterolemia. Vitamin B6 deficiency: (which also occurs due to the consumption of unpolished rice )causes microcytic anaemia, depression, and convulsions. Vitamin B12 deficiency: causes pernicious anaemia, dementia, spinal cord degeneration, and homocysteine.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2-week-old Male baby presented to the paediatric clinic with bleeding from the injection site of vaccines. A mother reports that the baby has easy bruising all over the body. Other vital signs are normal, with normal developmental milestones. Baby has a medical history of malabsorption syndrome. His coagulation studies reveal prothrombin time to 25sec and increased clotting time. Hb 9.2g/dl and platelet count of 1.5lak/mm³ with normal fibrinogen levels. Which of the following vitamin deficiency could be a cause of this condition?", "options": [{"label": "A", "text": "Vitamin C", "correct": false}, {"label": "B", "text": "Vitamin E", "correct": false}, {"label": "C", "text": "Vitamin K", "correct": true}, {"label": "D", "text": "Vitamin H", "correct": false}], "correct_answer": "C. Vitamin K", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882853998-QTDK010037IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Vitamin K Vitamin K: Given the case scenario depicts hemorrhagic disease of newborn or vitamin K deficiency, it is a syndrome of severe systemic bleeding and ecchymosis appearing in 1st week of life, predominantly in breastfed infants.</p>\n<p><strong>Highyeild:</strong></p><p>Bleeding can occur from vaccination sites, including GITract, nasal, umbilical stump, and intracranial PT and APTT are increased with normal platelet count. Maternal use of drugs such as primidone, warfarin, and phenytoin that antagonise the action of vitamin K can also cause severe haemorrhage in babies. Vitamin E causes muscle weakness, peripheral neuropathy, and hemolytic anemia. Older children and adolescents with fat malabsorption, cholesterol liver disease, and short bowel syndrome are prone to vitamin E deficiency . Abetalipoproteinemia, caused by the genetic absence of apolipoprotein B is associated with fat malabsorption steatorrhea, undetectable plasma levels of vitamin E Vitamin C: deficiency early features include irritability, anorexia, anaemia appearance of petechiae due to increased capillary fragility. Gingival swelling, bleeding gums, generalised tenderness of limbs, painful joint swelling and peripheral edema are seen. Characteristic angular swelling at a costochondral junction known as a scorbutic rosary with depression of sternum seen. Vitamin H: also known as biotin. Deficiencies include anorexia, vomiting, dry, scaly dermatitis, glossitis and hypercholesterolemia. Long-term parental augmentation without biotin can also lead to defining pediatric and adult populations. Multiple carboxylase deficiency is a genetic disorder affecting the activity of carboxylase synthetase.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 13 yr old male patient presented with darkening of hands and feet for 6 months and darkening of the oral cavity for 2 months. The patient initially developed darkening of the right foot, which gradually increased to involve both feet up to ankles and hands, including inner wrists. These lesions were associated with itching. There was a history of fluid-filled lesions on feet around 2months ago. On examination, sunburnt-like blackish hyperpigmentation plaques were present over the dorsal aspect of hands and feet, prominent over knuckles seen. Which of the following option could be the cause of this disorder?", "options": [{"label": "A", "text": "Pantothenic acid", "correct": false}, {"label": "B", "text": "Nicotinic acid", "correct": true}, {"label": "C", "text": "Ascorbic acid", "correct": false}, {"label": "D", "text": "Folic acid", "correct": false}], "correct_answer": "B. Nicotinic acid", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682882854001-QTDK010038IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nicotinic acid Nicotinic acid or niacin /B3 deficiency: it leads to pillage characterized by 3 D( dermatitis, dementia, diarrhoea).</p>\n<p><strong>Highyeild:</strong></p><p>The cutaneous Pellagra consists of a symmetrical pigmented rash on body parts exposed to sunlight, especially the neck region. ( casal necklace). More acute cases may progress to vesiculation and ulceration with secondary infections. Neurological symptoms include apathy, headaches and loss of memory. Posterolateral cord degeneration and peripheral nerve lesions are seen in most chronic forms. Pantothenic acid/vitamin B5 is present in virtually all naturally occurring foods and is synthesised by microorganisms . Isolated pantothenate deficiency is rare and includes burning feet, insomnia and gastrointestinal symptoms. Folate deficiency can occur in malabsorption states such as chronic gastrointestinal infections , short bowel syndrome and celiac disease. Children with hemolytic anaemia have high folate requirements due to increased erythropoiesis , predisposing them to folate deficiency, impairing DNA synthesis, limiting cell division and affecting normal growth and repair of tissue. Ascorbic acid or vitamin C deficiency: early features of deficiency include i rritability, anorexi a and the appearance of petechiae due to increased capillary fragility, gingival swelling, bleeding gums, generalised tenderness of limbs and painful joint swelling. Peripheral edema is also seen. Characteristic angular swelling at the costochondral Junction, known as a scorbutic rosary with a depression of the sternum, is often apparent.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2yr old female child has been hospitalised due to bone pain, alopecia, bone deformity and difficulty walking. Laboratory studies reveal low calcium values, high alkaline phosphatase value and high parathyroid hormone with normal 25 OH vitamin D and 1,25 (OH) D values increased. Which of the following statements is true regarding the given condition?", "options": [{"label": "A", "text": "Mutation in PHEX gene", "correct": false}, {"label": "B", "text": "Mutation in vitamin D receptor", "correct": true}, {"label": "C", "text": "Mutation in 1 alpha-hydroxylase gene", "correct": false}, {"label": "D", "text": "Mutation in FGF23A GENE", "correct": false}], "correct_answer": "B. Mutation in vitamin D receptor", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Mutation in vitamin D receptor The given case scenario is vitamin D-dependent rickets type 2. It is an autosomal recessive disorder.</p>\n<p><strong>Highyeild:</strong></p><p>It’s due to a mutation in the gene vitamin D receptor. It shows normal 25 OH D3 , increased 1,25 OH D3. This leads to the virtual abolition of action of 1,25OHD3 , despite its marked raised levels in circulation. Early onset of rickets, a high prevalence of alopecia and ectodermal defects (oligodontia, milia, epidermal cysts) are characteristics. Hypocalcemia, secondary hyperparathyroidism, increased circulatory levels of 1,25OHD3 and absence or decreased response to vitamin D analogues are seen. Vitamin D-dependent rickets type 1: a condition characterised by a d eficiency of enzyme 25 , hydroxy D 1 alpha-hydroxylase. It reduces blood calcium levels, and normal to low phosphate and increased alkaline phosphatase levels are characteristics. Blood levels of 25 OH D3A are normal, but 1,25 OH are markedly decreased despite hypocalcemia. Clinical features include rickets, hypotonia, growth failure, motor retardation, convulsions due to hypocalcemia, anaemia and occasional respiratory difficulties Familial hypophosphatemic rickets: the gene for x-linked hypophosphatemic rickets is termed the PHEX gene, producing an endopeptidase. This enzyme is responsible for the breakdown of FGF23 , and enzyme deficiency leads to high FGF23 and excessive renal loss of phosphate. FGF23 also decreases the activity of renal 1 alpha hydroxylase. Therefore blood levels of 1,25OHD3 are low despite hypophosphatemia. Clinical features are lower limb deformities, coca vara, genu valgum and genu varum and short stature. Autosomal dominant hypophosphatemic rickets have a mutation in the gene encoding the FGF23 gene.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 35 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">
<div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-xl font-semibold mb-4">Instructions</h2> <h4 class="text-gray-800 text-lg font-semibold mt-6 mb-4">Test Features:</h4> <ul class="space-y-3"> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Multiple choice questions with single correct answers </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Timer-based testing for realistic exam conditions </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mark questions for review functionality </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Comprehensive results and performance analysis </li> <li class="flex items-center gap-3"> <i class="fa-solid fa-circle-check text-green-500"></i> Mobile-optimized interface for learning on-the-go </li> </ul> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="start-test">Start Test</button> </div> <div class="error-message hidden" id="error-message"></div> </div> </section> <!-- Quiz Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="quiz"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-3 mb-4"> <div class="progress-bar h-3 rounded-full" id="progress-bar" style="width: 0%"></div> </div> <!-- Question Header --> <div class="flex flex-col md:flex-row justify-between items-center mb-4"> <h2 class="text-lg font-semibold" id="question-number">Question <span>1</span> of 4</h2> <p class="text-lg font-semibold mt-2 md:mt-0" id="timer">Time Remaining: <span>00:00</span></p> </div> <!-- Question Content --> <div class="mb-6" id="question-content"> <p class="text-gray-800 mb-4" id="question-text"></p> <div class="flex flex-wrap gap-4 mb-4" id="question-images"></div> <div class="space-y-3" id="options"></div> </div> <!-- Navigation Buttons --> <div class="flex flex-col md:flex-row justify-between items-center gap-2 md:gap-4"> <div class="flex gap-2 w-full md:w-auto"> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="previous-btn">Previous</button> <button class="bg-[#2c5281] text-white px-4 py-3 w-full md:w-32 h-14 rounded-lg hover:bg-[#2c5281] transition" id="next-btn">Next</button> </div> <div class="flex items-center gap-2"> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="mark-review"> Review <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a1 1 0 00-1 1v14l3.293-3.293a1 1 0 011.414 0L17 17V3a1 1 0 00-1-1H10z" /> </svg> </button> <button class="bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 transition flex items-center gap-1" id="nav-toggle"> Question 🧭 </button> <button class="bg-green-500 text-white px-6 py-3 w-44 h-14 rounded-lg hover:bg-green-600 transition w-full md:w-auto" id="submit-test">Submit Test</button> </div> </div> </section> <!-- Results Section --> <section class="container mx-auto px-4 md:px-6 pt-4 md:pt-6 pb-1 hidden section-transition" id="results"> <div class="bg-white rounded-lg shadow-md p-4 md:p-6"> <h2 class="text-2xl font-semibold mb-4">Anaesthesia Machine - Results</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <p><strong>Correct:</strong> <span id="correct-count" class="text-[#000000]">0</span></p> <p><strong>Wrong:</strong> <span id="wrong-count" class="text-[#000000]">0</span></p> <p><strong>Unanswered:</strong> <span id="unanswered-count" class="text-[#000000]-500">0</span></p> <p><strong>Marked for Review:</strong> <span id="marked-count" class="text-[#000000]">0</span></p> </div> <h3 class="text-lg font-semibold mb-4" id="result-question-number">Question <span>1</span> of 4</h3> <div class="space-y-6" id="results-content"></div> <div class="result-nav"> <button aria-label="Previous question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" disabled="" id="prev-result">Previous</button> <button aria-label="Toggle results navigation panel" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="results-nav-toggle">Result 🧭</button> <button aria-label="Next question result" class="result-nav-btn bg-[#2c5281] text-white px-6 py-2 rounded-lg hover:bg-[#2c5281] transition" id="next-result">Next</button> </div> <div class="mt-6 flex space-x-4 button-group md:flex-row flex-col"> <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition" id="take-again">Take Again</button> </div> </div> </section> <!-- Exit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="exit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Leave Test?</h2> <p class="text-gray-700 mb-4">Your progress will be lost if you leave this page. Are you sure you want to exit?</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="continue-test">No, Continue</button> <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition" id="exit-test">Yes, Exit</button> </div> </div> </div> <!-- Submit Confirmation Modal --> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="submit-modal"> <div class="bg-white rounded-lg p-6 max-w-sm w-full"> <h2 class="text-xl font-semibold mb-4">Confirm Submission</h2> <p class="text-gray-700 mb-2">You have attempted <span id="attempted-count">0</span> of 15 questions.</p> <p class="text-gray-700 mb-4"><span id="unattempted-count">0</span> questions are unattempted.</p> <div class="flex justify-end space-x-4"> <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition" id="cancel-submit">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition" id="confirm-submit">Submit Test</button> </div> </div> </div> <!-- Quiz Navigation Panel --> <div class="fixed inset-y-0 right-0 nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="nav-panel"> <h2 class="text-lg font-semibold mb-4">Questions Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-nav">Close</button> </div> <!-- Results Navigation Panel --> <div class="fixed inset-y-0 right-0 results-nav-panel bg-white shadow-lg p-4 hidden overflow-y-auto" id="results-nav-panel"> <h2 class="text-lg font-semibold mb-4">Results Navigation</h2> <div class="mb-4"> <select class="w-full p-2 border rounded-lg text-gray-700" id="results-nav-filter"> <option value="all">All Questions</option> <option value="answered">Answered</option> <option value="unanswered">Unanswered</option> <option value="marked">Marked for Review</option> </select> </div> <div class="grid grid-cols-5 gap-2 md:gap-3" id="results-nav-grid"></div> <button class="mt-4 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition w-full" id="close-results-nav">Close</button> </div> <!-- JavaScript Logic --> <script> // Enable debug mode for detailed logging const DEBUG_MODE = true; // Log debug messages function debugLog(message) { if (DEBUG_MODE) { console.log(`[DEBUG] ${message}`); } } // Initialize questions with error handling let questions = []; let currentResultQuestion = 0; // State for current question in results try { debugLog("Attempting to parse questions_json"); questions = [{"text": "A 2-year-old male child presents with a lump on the right side of the abdomen. Ultrasound examination reveals it to be a solid mass. On examination, his right arm and leg were found to be longer. The most likely diagnosis is?", "options": [{"label": "A", "text": "Wilms tumor", "correct": true}, {"label": "B", "text": "Neuroblastoma", "correct": false}, {"label": "C", "text": "Nephroblastoma", "correct": false}, {"label": "D", "text": "Angiomyolipoma", "correct": false}], "correct_answer": "A. Wilms tumor", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Wilms tumor Wilms tumor or nephroblastoma is the commonest malignant neoplasm of the kidney and ~ the second most common abdominal malignancy in children. Approximately 6% of all childhood cancer is Wilms tumors with a peak incidence at 2-3 years of age. individuals with horseshoe kidneys have a higher risk of Wilms tumor.</p>\n<p><strong>Highyeild:</strong></p><p>Most patients present with an asymptomatic abdominal mass detected by their parents or physician during a routine examination. Features at diagnosis include hematuria(10-25%), hypertension (25%), and abdominal pain (.3-0\"). fever (20%), anorexia, and vomiting. Wilms.' Turner should be considered in any child with abdominal mass... Tumor thrombus extending into the inferior vena cava is found in 4-10%. Other features of the presentation include anemia. thrombocytosis, acquired deficiency of von 'Willebrand factor and factor VII, and polycythemia. Differential Diagnosis includes neuroblastoma and other flank masses including hydronephrosis, multicystic kidney, and rarely abdominal lymphoma and retroperitoneal rhabdomyosarcoma. Features of associated syndromes may be present in 10-20%. NEUROBLASTOMA- Signs and symptoms of neuroblastoma vary with the site of presentation. Generally, symptoms include abdominal pain, emesis, weight loss, anorexia, fatigue, and bone pain. Hypertension is an uncommon sign of the disease and is generally caused by renal artery compression, not catecholamine excess. Chronic diarrhea is a rare presenting symptom secondary to tumor secretion of vasoactive intestinal peptide secretion. Nephroblastoma is another name for Wilms tumor. Angiomyolipoma is usually presented in the hood.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old male presented in pediatric opd with complaints of a lump in the left side of the abdomen for the past 1 month.on examination, a solid ballotable mass is present in the left lumbar region. Also, the left arm and leg of the patient are longer. Ultrasound reveals a solid mass. The most likely diagnosis in this case is?", "options": [{"label": "A", "text": "Angiomyolipoma", "correct": false}, {"label": "B", "text": "Neuroblastoma", "correct": false}, {"label": "C", "text": "Nephroblastoma", "correct": true}, {"label": "D", "text": "Multicystic dysplastic kidney", "correct": false}], "correct_answer": "C. Nephroblastoma", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nephroblastoma Points in favor of nephroblastoma/ Wilms tumor:- 3 year age Lump in the abdomen- solid ballotable mass is present in the left lumbar region left arm and leg of the patient is longer- hemihypertrophy-beckwith widmann syndrome WILMS TUMOR/NEPHROBLASTOMA epidemiology ● MC primary malignant renal tumor of childhood ● &gt;95% tumors of kidney in children ● 2ND mc malignant abdominal tumor in childhood Presents b/w 2 and 5 years age etiology ● Mutation in the WT1 gene on chromosome 11 is seen in a significant proportion (bilateral, recurrence) ● Horseshoe kidney associated with Wilms tumor Clinical presentation ● Incidental discovery of asymptomatic abdominal mass (mc initial presentation) ● Hypertension-25% cases-increased renin ● Abdominal pain ● gross painless hematuria (18%) ● constitutional symptoms (fever, anorexia, weight loss) metastasis ● Mc to lungs, lymph nodes, and liver(in contrast to neuroblastoma in which mc site of metastasis is bone diagnosis ● Imaging studies (USG Doppler&gt; CT&gt;MRI) ● Confirmed by histology at the time of nephrectomy treatment ● Surgery and chemotherapy with or without radiotherapy</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Angiomyolipoma Angiomyolipomas, the most common benign solid tumors of the kidney, are composed of vascular, smooth muscle, and fatty tissue elements. They can rupture on occasion to cause severe hemorrhage . Angiomyolipomas are an important component of the tuberous sclerosis complex Option: B. Neuroblastoma also presents as an abdominal mass in children &lt;5 years of age, but the solid ballotable lump in the lumbar region is against it Option: D. Metacystic dysplastic kidney- MCDK is the most common cause of an abdominal mass in the newborn, the majority of cases are diagnosed in intrauterine life.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A Final year exam student is given a case of left-sided renal mass in a 3 years old boy. Also, the boy complains of hematuria. On examination, hypertension is present with a ballotable mass in the left lumbar region. The examiner asked him about the most probable diagnosis of this condition.", "options": [{"label": "A", "text": "Wilms tumor", "correct": true}, {"label": "B", "text": "Neuroblastoma", "correct": false}, {"label": "C", "text": "Angiomyolipoma", "correct": false}, {"label": "D", "text": "Rhabdomyosarcoma", "correct": false}], "correct_answer": "A. Wilms tumor", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Wilms tumor Points in favor of Wilms tumor: Left-sided renal mass in 3 years old Hematuria Hypertension Ballotable mass in the left lumbar region WILMS TUMOR/NEPHROBLASTOMA epidemiology ● MC primary malignant renal tumor of childhood ● &gt;95% tumors of kidney in children ● 2ND mc malignant abdominal tumor in childhood Presents b/w 2 and 5 years age etiology ● Mutation in the WT1 gene on chromosome 11 is seen in a significant proportion (bilateral, recurrence) ● Horseshoe kidney associated with Wilms tumor Clinical presentation ● Incidental discovery of asymptomatic abdominal mass (mc initial presentation) ● Hypertension-25% cases-increased renin ● Abdominal pain ● gross painless hematuria (18%) ● constitutional symptoms (fever, anorexia, weight loss) metastasis ● Mc to lungs, lymph nodes, and liver(in contrast to neuroblastoma in which mc site of metastasis is bone diagnosis ● Imaging studies (USG Doppler&gt; CT&gt;MRI) ● Confirmed by histology at the time of nephrectomy treatment ● Surgery and chemotherapy with or without radiotherapy</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: B. Neuroblastoma also presents as an abdominal mass in children &lt;5 years of age, but the solid ballotable lump in the lumbar region is against it Option: C. Angiomyolipoma Angiomyolipomas, the most common benign solid tumors of the kidney, are composed of vascular, smooth muscle, and fatty tissue elements. They can Rupture on occasion to cause severe hemorrhage. Angiomyolipomas are an important component of the tuberous sclerosis complex. Option: D. Rhabdomyosarcoma- it is the most common pediatric soft tissue sarcoma with maximum cases arising from head and neck.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A Final year exam student is given a case of left-sided renal mass in a 3 years old boy. Also, the boy complained of hematuria. On examination, hypertension is present with a ballotable mass in the n left lumbar region. A provisional diagnosis of Wilms tumor is made. The examiner asked the student about the most common presentation of a child with Wilms tumor?", "options": [{"label": "A", "text": "Hematuria", "correct": false}, {"label": "B", "text": "Hypertension", "correct": false}, {"label": "C", "text": "Asymptomatic abdominal mass", "correct": true}, {"label": "D", "text": "Painful mass", "correct": false}], "correct_answer": "C. Asymptomatic abdominal mass", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Asymptomatic abdominal mass WILMS TUMOR/NEPHROBLASTOMA epidemiology ● MC primary malignant renal tumor of childhood ● &gt;95% tumors of kidney in children ● 2ND mc malignant abdominal tumor in childhood Presents b/w 2 and 5 years age etiology ● Mutation in WT1 gene on chromosome 11 is seen in significant proportion (bilateral,recurrence) ● Horseshoe kidney associated with wilms tumor Clinicalpresentation ● Incidental discovery of asymptomatic abdominal mass (mc initial presentation) ● Hypertension-25% cases-increased renin ● Abdominal pain ● gross painless hematuria (18%) ● constitutional symptoms (fever, anorexia, weight loss) metastasis ● Mc to lungs, lymphnodes and liver(in contrast to neuroblastoma in which mc site of metastasis is bone diagnosis ● Imaging studies (USG doppler&gt; CT&gt;MRI) ● Confirmed by histology at time of nephrectomy treatment ● Surgery and chemotherapy with or without radiotherapy</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-year-old male presented in pediatric opd with complaints of a lump in the left side of the abdomen for the past 1 month.on examination, a solid ballotable mass is present in the left lumbar region . Also , left arm and leg of patient is longer. Ultrasound reveals a solid mass. A Provisional diagnosis of Wilms tumor is made. It is associated with which of the following conditions? Gonal dysgenesis Aniridia Early onset renal failure Polycystic kidney Select the correct answer from given below code:-", "options": [{"label": "A", "text": "1,2,3", "correct": true}, {"label": "B", "text": "1,2,4", "correct": false}, {"label": "C", "text": "2,3,4", "correct": false}, {"label": "D", "text": "1,3,4", "correct": false}], "correct_answer": "A. 1,2,3", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,2,3 SYNDROME CLINICAL CHARACTERISTICS GENETIC ALTERATION WAGR (33% risk) Wilms tumor, aniridia, genitourinary abnormalities, and mental retardation Del 11p13 (WT1 andPAX6) Denys-Drash syndrome (90% risk- maximum risk) ● Early-onset renal failure with renal mesangial sclerosis, ● Male pseudohermaphrodism(gonadal dysgenesis) ● Increased risk of gonadoblastoma WT1 missense mutation Beckwith-Wiedemann syndrome ● Organomegaly (liver, kidney, adrenal, pancreas) ● Macroglossia ● Omphalocele ● Hemihypertrophy ● Adrenal cytomegaly Genomic imprinting</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 2.8 kg male baby is born to a 27-year-old primigravida mother by normal vaginal delivery at 39 weeks gestation. On examination, a mass is palpated in the left lumbar region. The ultrasound shows a soap bubble appearance on the kidney. the most probable diagnosis in this condition is?", "options": [{"label": "A", "text": "Polycystic kidney diseases", "correct": false}, {"label": "B", "text": "Multicystic renal dysplasia", "correct": true}, {"label": "C", "text": "Neuroblastoma", "correct": false}, {"label": "D", "text": "Wilms tumor", "correct": false}], "correct_answer": "B. Multicystic renal dysplasia", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Multicystic renal dysplasia Mc cause of palpable abdominal mass in newborns is multicystic kidney diseases Also soap bubble appearance on ultrasound is in favor of it. Multicystic kidney diseases (MCDK) Congenital condition in which the kidney is replaced by cysts and does not function; MCDK usually is unilateral and generally is not inherited. Bilateral MCDKs are incompatible with life. Most common cause of abdominal mass in newborns, but the vast majority are nonpalpable at birth. In most cases, it is discovered incidentally during prenatal sonography . Sonography shows the characteristic appearance of a kidney replaced by multiple cysts of varying sizes that do not communicate, and no identifiable parenchyma is present. Management is controversial. Complete cyst regression occurs in nearly half of the MCDKs by age 7 yr. The risk of associated hypertension is 2–1.2% , and the risk of a Wilms tumor arising from an MCDK is approximately 1 in 1,200. Because neoplasms arise from the stromal rather than the cystic component, even if the cysts regress completely, the likelihood that the kidney could develop neoplasm is not altered. If there is an abdominal mass, the cysts enlarge, the stromal core increases in size, or hypertension develops, nephrectomy is recommended</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A . Polycystic kidney diseases are bilateral and presents with oligohydramnios in the antenatal period. Option: C . Neuroblastoma- is not present at birth but mostly develops by 1st year of life . also, ultrasound findings do not correspond with it. Option: D . WILMS tumor develops in the age of 2 to 5 yrs age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "As an exam spotter, the following image is given to you. The potter facies is seen with which of the following conditions?", "options": [{"label": "A", "text": "Hepatic fibrosis", "correct": false}, {"label": "B", "text": "Xanthogranulomatous pyelonephritis", "correct": false}, {"label": "C", "text": "Bilateral renal agenesis", "correct": true}, {"label": "D", "text": "Polyhydramnios", "correct": false}], "correct_answer": "C. Bilateral renal agenesis", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884878772-QTDK055008IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Bilateral renal agenesis Potter syndrome:- Bilateral renal agenesis is incompatible with extrauterine life and produces Potter syndrome. Death occurs shortly after birth from pulmonary hypoplasia. The newborn has a characteristic facial appearance, termed Potter Facies The eyes are widely separated with epicanthic folds, the ears are low set, the nose is broad and compressed flat, the chin is receding, and there are limb anomalies. Bilateral renal agenesis should be suspected when maternal ultrasonography demonstrates oligohydramnios, nonvisualization of the bladder, and absent kidneys.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 28-year-old pregnant female presented to a pediatrician with an ultrasound at 19 weeks gestation. Ultrasound revealed that the fetal kidney shows a bunch of grapes appearance. Which of the following statements are true about this condition? Mostly inherited Unilateral renal dysplasia High risk of malignant transformation of stroma present After birth, cysts can regress Select the correct answer from given below code:-", "options": [{"label": "A", "text": "1,2,3", "correct": false}, {"label": "B", "text": "1,2,4", "correct": true}, {"label": "C", "text": "2,3,4", "correct": false}, {"label": "D", "text": "1,3,4", "correct": false}], "correct_answer": "B. 1,2,4", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>1,2,4 Points in favor of multicystic kidney diseases is: fetal kidney shows a bunch of grapes appearance Multicystic kidney diseases (MCDK) Congenital condition in which kidney is replaced by cysts and does not function; MCDK usually is unilateral and generally is not inherited. Bilateral MCDKs are incompatible with life. Most common cause of abdominal mass in newborns, but the vast majority are nonpalpable at birth. In most cases, it is discovered incidentally during prenatal sonography. Sonography shows the characteristic appearance of a kidney replaced by multiple cysts of varying sizes that do not communicate, and no identifiable parenchyma is present. Management is controversial. Complete cyst regression occurs in nearly half of the MCDKs by age 7 yr. The risk of associated hypertension is 0.2–1.2%, and the risk of a Wilms tumor arising from an MCDK is approximately 1 in 1,200. Because neoplasms arise from the stromal rather than the cystic component, even if the cysts regress completely, the likelihood that the kidney could develop neoplasm is not altered. If there is an abdominal mass, the cysts enlarge, the stromal core increases in size, or hypertension develops, nephrectomy is recommended.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-day-old male neonate presented in pediatric opd with complaints of the decreased passage of urine. On examination, hypertension is present. Also palpable mass is present in the bilateral lumbar region. Ultrasound shows bilaterally enlarged kidneys with poor corticomedullary differentiation. the newborn might be suffering from?", "options": [{"label": "A", "text": "Autosomal dominant polycystic kidney diseases", "correct": false}, {"label": "B", "text": "Multicystic renal dysplasia", "correct": false}, {"label": "C", "text": "Autosomal recessive polycystic kidney diseases", "correct": true}, {"label": "D", "text": "Wilms tumor", "correct": false}], "correct_answer": "C. Autosomal recessive polycystic kidney diseases", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Autosomal recessive polycystic kidney diseases Points in favor of Autosomal recessive polycystic kidney diseases Hypertension Palpable mass present in the bilateral lumbar region. Ultrasound shows bilaterally enlarged kidneys with poor corticomedullary differentiation autosomal recessive polycystic kidney diseases. INHERITANCE Autosomal recessive GENETIC DEFECT gene for ARPKD (PKHD1 [polycystic kidney and hepatic disease 1]) encodes fibrocystin Pathology Both kidneys are markedly enlarged and grossly show innumerable small cysts throughout the cortex and medulla Clinical features antenatally-oligohydramnios and bilateral enlarged kidneys on prenatal ultrasound bilateral flank masses during neonatal period or in early infancy potter syndrome Hypertension within first few weeks of life End stage renal diseases by 10 years of life ultrasonography Markedly enlarged and uniformly hyperechogenic kidneys with poor corticomedullary differentiation(salt and pepper sign) diagnosis bilateral palpable flank masses in an infant with pulmonary hypoplasia, oligohydramnios, and hypertension and the absence of renal cysts by sonography of the parents</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Autosomal dominant polycystic kidney diseases is seen in 3rd decade of life with episodic hematuria, hypertension, palpable kidneys and hepatic cysts Option: B. Multicystic renal dysplasia- mc cause of abdominal mass in neonate. unilateral kidney involvement is seen Option: D. Wilms tumor is never present at birth, but seen in the age of 2 to 5 years of age.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 26 YEARS old pregnant female level 2 ultrasound at 20 weeks gestation revealed oligohydramnios, pulmonary hypoplasia, and renal agenesis. This condition is diagnosed as?", "options": [{"label": "A", "text": "Perthe diseases", "correct": false}, {"label": "B", "text": "Patau syndrome", "correct": false}, {"label": "C", "text": "Potter syndrome", "correct": true}, {"label": "D", "text": "None of the above", "correct": false}], "correct_answer": "C. Potter syndrome", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Potter syndrome Components of the oligohydramnios complex (Potter syndrome), including Low-set ears Micrognathia Flattened nose Limb-positioning defects Intrauterine growth restriction May be present at death from pulmonary hypoplasia Bilateral renal agenesis</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option A . Perthe diseases- hip disorder seen in the age of 4 to 10 years Option B . PATAU syndrome – trisomy 13</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 3-year-old boy is brought to the clinic because the parents noticed an abdominal mass on the left flank. USG Abdomen revealed a large, solid, echogenic left renal mass. Which is the most likely diagnosis?", "options": [{"label": "A", "text": "Hydronephrosis", "correct": false}, {"label": "B", "text": "Nephroblastoma", "correct": true}, {"label": "C", "text": "Neuroblastoma", "correct": false}, {"label": "D", "text": "Multicystic kidney disease", "correct": false}], "correct_answer": "B. Nephroblastoma", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Nephroblastoma Wilms tumor or nephroblastoma should be considered in any child with an abdominal mass. USG's finding of a solid mass arising from the left kidney almost confirms the diagnosis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options:- Option: A. Hydronephrosis: While it presents as mass per abdomen USG would show dilated pelvis or calyces and not a solid mass Option: C. Neuroblastoma derived from neural crest cells, is the most common intra-abdominal and extra-cranial tumor in children. It arises from any site where sympathetic tissue is found. Most commonly from the adrenal medulla (65%) Option: D. A The USG did not show the presence of any cysts, this option can be safely ruled out.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 5-year-old child is presented to the clinic with a palpable mass felt in the right flank. Their parents add that he is mentally retarded. On examination, the following lesion in the eyes are seen: Chromosome study showed deletion of WT1 gene at 11p13. What is the most likely diagnosis?", "options": [{"label": "A", "text": "Denys-Drash syndrome", "correct": false}, {"label": "B", "text": "Beckwith-Wiedemann syndrome", "correct": false}, {"label": "C", "text": "WAGR syndrome", "correct": true}, {"label": "D", "text": "None of the above", "correct": false}], "correct_answer": "C. WAGR syndrome", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884878886-QTDK055014IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>WAGR syndrome Some genetic syndromes predispose to Wilms tumor. These are Denys-Drash syndrome, Beckwith-Wiedemann syndrome, and WAGR syndrome.</p>\n<p><strong>Highyeild:</strong></p><p>WAGR syndrome stands for Wilms tumor, Aniridia, genitourinary abnormalities, and mental retardation. WT1 gene deletion at 11p13 is seen here. The image above shows aniridia. Aniridia refers to the partial or complete absence of the iris. Denys Drash syndrome includes renal failure, mesangial sclerosis, male hermaphroditism, and WT1 missense mutation. Beckwith-Widemann syndrome includes hemihypertrophy, macroglossia, omphalocele, organomegaly, and WT2 deletion at 11p15</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "The mother of a 1-month-old infant brings her child to the clinic with complaints of decreased urine output. On per abdomen examination, mass is felt at both the flanks. USG abdomen was ordered and showed bulky enlarged kidneys with increased echogenicity, loss of corticomedullary differentiation, and presence of cysts. Which of the following is the cause of this condition?", "options": [{"label": "A", "text": "Caused by mutations in PKHD1 gene", "correct": true}, {"label": "B", "text": "Caused by mutations in ADPKD1 gene", "correct": false}, {"label": "C", "text": "Caused by mutations in hepatocyte nuclear factor β", "correct": false}, {"label": "D", "text": "Caused by a mutation in NPHP1", "correct": false}], "correct_answer": "A. Caused by mutations in PKHD1 gene", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>Caused by mutations in PKHD1 gene The clinical scenario present in early infancy points toward a diagnosis of Autosomal Recessive Polycystic Kidney Disease which is caused by mutations in the PKHD1 gene encoding fibrocystin or polyglactin.</p>\n<p><strong>Highyeild:</strong></p><p>This leads to fusiform dilation of collecting tubules which are arranged radially from the cortex to the Affected children are usually present in the neonatal period with oliguria, palpable kidneys, and respiratory insufficiency. Autosomal Dominant Polycystic Kidney Disease is caused by the mutations in ADPKD1 (chromosome 16) or ADPKD2 (Chromosome 4) genes. It usually presents in the third decade of life. Mutations in hepatocyte nuclear factor β gene lead to Glomerulocystic Kidney Disease. It is associated with renal cysts, maturity-onset diabetes in young and genitourinary abnormalities. Mutations in gene NPHP 1-9 encoding nephrocystins cause Nephronophthisis-Medullary Cystic Disease Complex. Patients with this condition present during the first decade of life with polydipsia, polyuria or enuresis, growth retardation, renal insufficiency, acidosis, and anemia.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 1-year-old infant is brought to the OPD with complaints of mass felt at the left flank. On further examination, his Blood Pressure is found to be above the 95th percentile for his category. USG scan reveals enlarged kidneys on both sides with loss of corticomedullary differentiation. A diagnosis of polycystic kidneys was made. Which of the following correctly shows the inheritance pattern of this disease?", "options": [{"label": "A", "text": "A", "correct": false}, {"label": "B", "text": "B", "correct": true}, {"label": "C", "text": "C", "correct": false}, {"label": "D", "text": "D", "correct": false}], "correct_answer": "B. B", "question_images": ["https://dbmi-data.s3.ap-south-1.amazonaws.com/photos-1682884878937-QTDK055018IMG1.JPG"], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>B The clinical scenario present in infancy points towards a diagnosis of Autosomal Recessive Polycystic Kidney Disease which is caused by mutations in the PKHD1 gene encoding fibrocystin or polyductin. Autosomal Recessive mode of inheritance: Cannot be dominant as two unaffected parents could not have an affected offspring.</p>\n<p><strong>Highyeild:</strong></p><p>It is inherited in an Autosomal Recessive pattern . This leads to fusiform dilation of collecting tubules which are arranged radially from the cortex to the Affected children are usually present in the neonatal period with oliguria, palpable kidneys, respiratory insufficiency, hypertension, and renal insufficiency.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Autosomal Dominant mode of inheritance: It cannot be recessive as two affected parents could not have an unaffected offspring and therefore parents must be heterozygous. Option: C . X-Linked Dominant mode of inheritance: 100% incidence of affected daughters from an affected father Option: D . 100% incidence of affected sons from an affected mother.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}, {"text": "A 7- year -old boy is brought to the clinic with complaints of excessive thirst and easy fatiguability. After further investigations, a diagnosis of Nephronophthisis-Medullary Cystic Disease Complex was made. Which of the following is true about this condition?", "options": [{"label": "A", "text": "Caused by mutations in the gene encoding for polycystins", "correct": false}, {"label": "B", "text": "USG shows small kidney with corticomedullary cysts", "correct": true}, {"label": "C", "text": "May occur along with Tuberous sclerosis and Patau syndrome", "correct": false}, {"label": "D", "text": "Histology shows cysts in Glomeruli", "correct": false}], "correct_answer": "B. USG shows small kidney with corticomedullary cysts", "question_images": [], "explanation_images": [], "explanation": "<p><strong>Solution:</strong></p><p>USG shows small kidney with corticomedullary cysts Nephronophthisis-Medullary Cystic Disease Complex caused due to mutations in NPHP 1-9 encoding nephrocystins usually present in 1st decade of life with polydipsia, polyuria, or enuresis, growth retardation, and renal insufficiency.</p>\n<p><strong>Highyeild:</strong></p><p>Extrarenal features include retinitis pigmentosa. Diagnosis of nephronophthisis is supported by the ultrasound finding of small kidneys with corticomedullary cysts and poor corticomedullary differentiation. Renal histology shows cysts involving the collecting ducts, tubular dilation with atrophy, and interstitial fibrosis.</p>\n<p><strong>Random:</strong></p><p>Explanation for incorrect options: - Option: A. Polycystins are encoded by ADPKD genes. Mutation in these genes leads to Autosomal Dominant Polycystic Kidney Disease. Option: C. Glomerulocystic Kidney Disease may occur in association with syndromes such as Tuberous Sclerosis and Patau syndrome. Option: D. Cysts in glomeruli are seen in Glomerulocystic Kidney Disease.</p>\n<p>@dams_new_robot</p>", "bot": "@dams_new_robot", "video": ""}]; if (!Array.isArray(questions) || questions.length === 0) { throw new Error("Questions data is empty or invalid"); } debugLog(`Successfully parsed ${questions.length} questions`); } catch (e) { console.error("Failed to parse questions_json:", e); document.getElementById('error-message').innerHTML = "Error loading quiz data. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; // Fallback to sample questions for testing questions = [ { text: "What is 2 + 2?", options: [ { label: "A", text: "3", correct: false }, { label: "B", text: "4", correct: true }, { label: "C", text: "5", correct: false }, { label: "D", text: "6", correct: false } ], correct_answer: "B. 4", question_images: [], explanation_images: [], explanation: "<p>2 + 2 = 4</p><p>@dams_new_robot</p>", bot: "@dams_new_robot", audio: "", video: "" } ]; debugLog("Loaded fallback questions"); } // Quiz state let currentQuestion = 0; let answers = new Array(questions.length).fill(null); let markedForReview = new Array(questions.length).fill(false); let timeRemaining = 25 * 60; // Duration in seconds let timerInterval = null; const quizId = `{title.replace(/\s+/g, '_').toLowerCase()}`; // Unique ID for local storage // Load saved progress function loadProgress() { try { debugLog("Loading progress from localStorage"); const saved = localStorage.getItem(`quiz_${quizId}`); if (saved) { const { savedAnswers, savedMarked, savedTime } = JSON.parse(saved); answers = savedAnswers || answers; markedForReview = savedMarked || markedForReview; timeRemaining = savedTime !== undefined ? savedTime : timeRemaining; debugLog("Progress loaded successfully"); } else { debugLog("No saved progress found"); } } catch (e) { console.error("Error loading progress:", e); debugLog("Failed to load progress: " + e.message); } } // Save progress function saveProgress() { try { debugLog("Saving progress to localStorage"); localStorage.setItem(`quiz_${quizId}`, JSON.stringify({ savedAnswers: answers, savedMarked: markedForReview, savedTime: timeRemaining })); debugLog("Progress saved successfully"); } catch (e) { console.error("Error saving progress:", e); debugLog("Failed to save progress: " + e.message); } } // Initialize quiz function initQuiz() { try { debugLog("Initializing quiz"); loadProgress(); const startButton = document.getElementById('start-test'); if (!startButton) { throw new Error("Start test button not found"); } startButton.addEventListener('click', startQuiz); debugLog("Start test button listener attached"); document.getElementById('previous-btn').addEventListener('click', showPreviousQuestion); document.getElementById('next-btn').addEventListener('click', showNextQuestion); document.getElementById('mark-review').addEventListener('click', toggleMarkForReview); document.getElementById('nav-toggle').addEventListener('click', toggleNavPanel); document.getElementById('submit-test').addEventListener('click', showSubmitModal); document.getElementById('continue-test').addEventListener('click', closeExitModal); document.getElementById('exit-test').addEventListener('click', () => { debugLog("Exiting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('cancel-submit').addEventListener('click', closeSubmitModal); document.getElementById('confirm-submit').addEventListener('click', submitTest); document.getElementById('take-again').addEventListener('click', () => { debugLog("Restarting test"); localStorage.removeItem(`quiz_${quizId}`); window.location.reload(); }); document.getElementById('review-test').addEventListener('click', () => showResults(currentResultQuestion)); document.getElementById('close-nav').addEventListener('click', toggleNavPanel); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('nav-filter').addEventListener('change', updateNavPanel); document.getElementById('prev-result').addEventListener('click', showPreviousResult); document.getElementById('next-result').addEventListener('click', showNextResult); document.getElementById('results-nav-toggle').addEventListener('click', toggleResultsNavPanel); document.getElementById('close-results-nav').addEventListener('click', toggleResultsNavPanel); document.getElementById('results-nav-filter').addEventListener('change', updateResultsNavPanel); debugLog("Quiz initialized successfully"); } catch (e) { console.error("Failed to initialize quiz:", e); debugLog("Failed to initialize quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('start-test').disabled = true; } } // Start quiz function startQuiz() { try { debugLog("Starting quiz"); document.getElementById('instructions').classList.add('hidden'); document.getElementById('quiz').classList.remove('hidden'); showQuestion(currentQuestion); startTimer(); updateNavPanel(); debugLog("Quiz started successfully"); } catch (e) { console.error("Error starting quiz:", e); debugLog("Failed to start quiz: " + e.message); document.getElementById('error-message').innerHTML = "Error starting quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); document.getElementById('quiz').classList.add('hidden'); document.getElementById('instructions').classList.remove('hidden'); } } // Show question function showQuestion(index) { try { debugLog(`Showing question ${index + 1}`); currentQuestion = index; const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } document.getElementById('question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('question-text').innerHTML = q.text || "No question text available"; const imagesDiv = document.getElementById('question-images'); imagesDiv.innerHTML = q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg">`).join('') : ''; const optionsDiv = document.getElementById('options'); optionsDiv.innerHTML = q.options && q.options.length > 0 ? q.options.map(opt => ` <button class="option-btn w-full text-left p-3 border rounded-lg ${answers[index] === opt.label ? 'selected' : ''}" onclick="selectOption(${index}, '${opt.label}')" aria-label="Option ${opt.label}: ${opt.text}"> ${opt.label}. ${opt.text} </button> `).join('') : '<p class="text-red-500">No options available</p>'; document.getElementById('previous-btn').disabled = index === 0; document.getElementById('next-btn').disabled = index === questions.length - 1; document.getElementById('mark-review').classList.toggle('marked', markedForReview[index]); updateProgressBar(); saveProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying question:", e); debugLog("Failed to display question: " + e.message); } } // Select option function selectOption(index, label) { try { debugLog(`Selecting option ${label} for question ${index + 1}`); answers[index] = label; const optionsDiv = document.getElementById('options'); const optionButtons = optionsDiv.querySelectorAll('.option-btn'); optionButtons.forEach(btn => { const btnLabel = btn.textContent.trim().split('.')[0]; btn.classList.toggle('selected', btnLabel === label); }); updateNavPanel(); saveProgress(); debugLog(`Option ${label} selected for question ${index + 1}`); } catch (e) { console.error("Error selecting option:", e); debugLog("Failed to select option: " + e.message); } } // Toggle mark for review function toggleMarkForReview() { try { debugLog(`Toggling mark for review on question ${currentQuestion + 1}`); markedForReview[currentQuestion] = !markedForReview[currentQuestion]; document.getElementById('mark-review').classList.toggle('marked', markedForReview[currentQuestion]); updateNavPanel(); saveProgress(); debugLog(`Mark for review toggled for question ${currentQuestion + 1}`); } catch (e) { console.error("Error marking for review:", e); debugLog("Failed to mark for review: " + e.message); } } // Navigate to previous question function showPreviousQuestion() { try { debugLog(`Navigating to previous question from ${currentQuestion + 1}`); if (currentQuestion > 0) { currentQuestion--; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to previous question:", e); debugLog("Failed to navigate to previous question: " + e.message); } } // Navigate to next question function showNextQuestion() { try { debugLog(`Navigating to next question from ${currentQuestion + 1}`); if (currentQuestion < questions.length - 1) { currentQuestion++; showQuestion(currentQuestion); } } catch (e) { console.error("Error navigating to next question:", e); debugLog("Failed to navigate to next question: " + e.message); } } // Handle question navigation click function handleQuestionNavClick(index) { try { debugLog(`Navigating to question ${index + 1} via nav panel`); showQuestion(index); toggleNavPanel(); } catch (e) { console.error("Error handling navigation click:", e); debugLog("Failed to navigate via nav panel: " + e.message); } } // Start timer function startTimer() { try { debugLog("Starting timer"); timerInterval = setInterval(() => { if (timeRemaining <= 0) { debugLog("Timer expired, submitting test"); clearInterval(timerInterval); submitTest(); } else { timeRemaining--; const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; document.getElementById('timer').innerHTML = `Time Remaining: <span>${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>`; saveProgress(); } }, 1000); debugLog("Timer started successfully"); } catch (e) { console.error("Error starting timer:", e); debugLog("Failed to start timer: " + e.message); } } // Update progress bar function updateProgressBar() { try { debugLog("Updating progress bar"); const progress = ((currentQuestion + 1) / questions.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; debugLog("Progress bar updated"); } catch (e) { console.error("Error updating progress bar:", e); debugLog("Failed to update progress bar: " + e.message); } } // Update quiz navigation panel function updateNavPanel() { try { debugLog("Updating quiz navigation panel"); const filter = document.getElementById('nav-filter').value; const navGrid = document.getElementById('nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="question-nav-btn ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleQuestionNavClick(${i})" aria-label="Go to Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Quiz navigation panel updated"); } catch (e) { console.error("Error updating quiz navigation panel:", e); debugLog("Failed to update quiz navigation panel: " + e.message); } } // Update results navigation panel function updateResultsNavPanel() { try { debugLog("Updating results navigation panel"); const filter = document.getElementById('results-nav-filter').value; const navGrid = document.getElementById('results-nav-grid'); navGrid.innerHTML = questions.map((_, i) => { if (filter === 'answered' && !answers[i]) return ''; if (filter === 'unanswered' && answers[i]) return ''; if (filter === 'marked' && !markedForReview[i]) return ''; return ` <button class="result-nav-btn-grid ${answers[i] ? 'answered' : 'unanswered'} ${markedForReview[i] ? 'marked-nav' : ''}" onclick="handleResultNavClick(${i})" aria-label="Go to Result for Question ${i + 1}"> ${i + 1} </button> `; }).join(''); debugLog("Results navigation panel updated"); } catch (e) { console.error("Error updating results navigation panel:", e); debugLog("Failed to update results navigation panel: " + e.message); } } // Toggle quiz navigation panel function toggleNavPanel() { try { debugLog("Toggling quiz navigation panel"); const navPanel = document.getElementById('nav-panel'); navPanel.classList.toggle('hidden'); debugLog("Quiz navigation panel toggled"); } catch (e) { console.error("Error toggling quiz navigation panel:", e); debugLog("Failed to toggle quiz navigation panel: " + e.message); } } // Toggle results navigation panel function toggleResultsNavPanel() { try { debugLog("Toggling results navigation panel"); const resultsNavPanel = document.getElementById('results-nav-panel'); resultsNavPanel.classList.toggle('hidden'); if (!resultsNavPanel.classList.contains('hidden')) { updateResultsNavPanel(); } debugLog("Results navigation panel toggled"); } catch (e) { console.error("Error toggling results navigation panel:", e); debugLog("Failed to toggle results navigation panel: " + e.message); } } // Handle result navigation click function handleResultNavClick(index) { try { debugLog(`Navigating to result for question ${index + 1} via nav panel`); showResults(index); toggleResultsNavPanel(); } catch (e) { console.error("Error handling result navigation click:", e); debugLog("Failed to navigate to result: " + e.message); } } // Show submit modal function showSubmitModal() { try { debugLog("Showing submit modal"); const attempted = answers.filter(a => a !== null).length; document.getElementById('attempted-count').textContent = attempted; document.getElementById('unattempted-count').textContent = questions.length - attempted; document.getElementById('submit-modal').classList.remove('hidden'); debugLog("Submit modal displayed"); } catch (e) { console.error("Error showing submit modal:", e); debugLog("Failed to show submit modal: " + e.message); } } // Close submit modal function closeSubmitModal() { try { debugLog("Closing submit modal"); document.getElementById('submit-modal').classList.add('hidden'); debugLog("Submit modal closed"); } catch (e) { console.error("Error closing submit modal:", e); debugLog("Failed to close submit modal: " + e.message); } } // Close exit modal function closeExitModal() { try { debugLog("Closing exit modal"); document.getElementById('exit-modal').classList.add('hidden'); debugLog("Exit modal closed"); } catch (e) { console.error("Error closing exit modal:", e); debugLog("Failed to close exit modal: " + e.message); } } // Submit test function submitTest() { try { debugLog("Submitting test"); clearInterval(timerInterval); document.getElementById('quiz').classList.add('hidden'); document.getElementById('submit-modal').classList.add('hidden'); document.getElementById('results').classList.remove('hidden'); showResults(0); // Start with first question // Trigger confetti animation confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); localStorage.removeItem(`quiz_${quizId}`); debugLog("Test submitted successfully"); } catch (e) { console.error("Error submitting test:", e); debugLog("Failed to submit test: " + e.message); } } // Show result for a single question function showResults(index) { try { debugLog(`Showing result for question ${index + 1}`); currentResultQuestion = index; let correct = 0, wrong = 0, unanswered = 0, marked = 0; answers.forEach((answer, i) => { const isCorrect = answer && questions[i].options.find(opt => opt.label === answer)?.correct; if (answer === null) unanswered++; else if (isCorrect) correct++; else wrong++; if (markedForReview[i]) marked++; }); const q = questions[index]; if (!q) { throw new Error(`Question ${index} is undefined`); } const userAnswer = answers[index]; const isCorrect = userAnswer && q.options.find(opt => opt.label === userAnswer)?.correct; const resultsContent = document.getElementById('results-content'); resultsContent.innerHTML = ` <div class="border p-4 rounded-lg ${isCorrect ? 'bg-green-50' : userAnswer ? 'bg-red-50' : 'bg-gray-50'}"> <p class="font-semibold">Question ${index + 1}: ${q.text || 'No question text'}</p> ${q.question_images && q.question_images.length > 0 ? q.question_images.map(url => `<img src="${url}" alt="Question Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} <p><strong>Your Answer:</strong> ${userAnswer ? `${userAnswer}. ${q.options.find(opt => opt.label === userAnswer)?.text || 'Invalid option'}` : 'Unanswered'}</p> <p><strong>Correct Answer:</strong> ${q.correct_answer || 'Unknown'}</p> <div class="mt-2">${q.explanation || 'No explanation available'}</div> ${q.explanation_images && q.explanation_images.length > 0 ? q.explanation_images.map(url => `<img src="${url}" alt="Explanation Image" class="max-w-full h-auto rounded-lg my-2">`).join('') : ''} ${q.video ? ` <button class="play-video bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadVideo(this, '${q.video}', 'video-${index}')" aria-label="Play explanation video for Question ${index + 1}"> Play Video Explanation </button> <div id="video-${index}" class="video-container mt-2"></div> ` : '<p class="text-gray-500 mt-2">No video available</p>'} ${q.audio ? ` <button class="play-audio bg-blue-500 text-white px-4 py-2 rounded-lg mt-2" onclick="loadAudio(this, '${q.audio}', 'audio-${index}')" aria-label="Play audio explanation for Question ${index + 1}"> Play Audio Explanation </button> <div id="audio-${index}" class="audio-container mt-2"></div> ` : ''} </div> `; document.getElementById('correct-count').textContent = correct; document.getElementById('wrong-count').textContent = wrong; document.getElementById('unanswered-count').textContent = unanswered; document.getElementById('marked-count').textContent = marked; document.getElementById('result-question-number').innerHTML = `Question <span>${index + 1}</span> of ${questions.length}`; document.getElementById('prev-result').disabled = index === 0; document.getElementById('next-result').disabled = index === questions.length - 1; updateResultsNavPanel(); window.scrollTo({ top: 0, behavior: 'smooth' }); debugLog(`Result for question ${index + 1} displayed successfully`); } catch (e) { console.error("Error displaying result:", e); debugLog("Failed to display result: " + e.message); } } // Navigate to previous result function showPreviousResult() { try { debugLog(`Navigating to previous result from question ${currentResultQuestion + 1}`); if (currentResultQuestion > 0) { showResults(currentResultQuestion - 1); } } catch (e) { console.error("Error navigating to previous result:", e); debugLog("Failed to navigate to previous result: " + e.message); } } // Navigate to next result function showNextResult() { try { debugLog(`Navigating to next result from question ${currentResultQuestion + 1}`); if (currentResultQuestion < questions.length - 1) { showResults(currentResultQuestion + 1); } } catch (e) { console.error("Error navigating to next result:", e); debugLog("Failed to navigate to next result: " + e.message); } } // Lazy-load video function loadVideo(button, videoUrl, containerId) { try { debugLog(`Loading video for ${containerId}: ${videoUrl}`); if (!videoUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No video available</p>`; button.remove(); debugLog("No video URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <div class="video-loading"></div> <video controls class="w-full max-w-[600px] rounded-lg" preload="metadata" aria-label="Video explanation"> <source src="${videoUrl}" type="${videoUrl.endsWith('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'}"> Your browser does not support the video tag. </video> `; container.classList.add('active'); button.remove(); // Initialize HLS.js for .m3u8 videos const video = container.querySelector('video'); if (videoUrl.endsWith('.m3u8') && Hls.isSupported()) { const hls = new Hls(); hls.loadSource(videoUrl); hls.attachMedia(video); hls.on(Hls.Events.ERROR, (event, data) => { console.error("HLS.js error:", data); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("HLS.js error: " + JSON.stringify(data)); }); } else if (videoUrl.endsWith('.m3u8') && video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoUrl; } // Handle video load errors video.onerror = () => { console.error("Video load error for URL:", videoUrl); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; debugLog("Video load error for URL: " + videoUrl); }; // Remove loading spinner when video is ready video.onloadedmetadata = () => { container.querySelector('.video-loading').remove(); debugLog("Video loaded successfully"); }; } catch (e) { console.error("Error loading video:", e); debugLog("Failed to load video: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading video. <a href="${videoUrl}" target="_blank" aria-label="Open video in new tab">Open video</a></p>`; } } // Lazy-load audio function loadAudio(button, audioUrl, containerId) { try { debugLog(`Loading audio for ${containerId}: ${audioUrl}`); if (!audioUrl) { const container = document.getElementById(containerId); container.innerHTML = `<p class="text-gray-500">No audio available</p>`; button.remove(); debugLog("No audio URL provided"); return; } const container = document.getElementById(containerId); container.innerHTML = ` <audio controls class="w-full max-w-[600px]" preload="metadata" aria-label="Audio explanation"> <source src="${audioUrl}" type="audio/mpeg"> Your browser does not support the audio tag. </audio> `; container.classList.add('active'); button.remove(); // Handle audio load errors const audio = container.querySelector('audio'); audio.onerror = () => { console.error("Audio load error for URL:", audioUrl); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; debugLog("Audio load error for URL: " + audioUrl); }; debugLog("Audio loaded successfully"); } catch (e) { console.error("Error loading audio:", e); debugLog("Failed to load audio: " + e.message); const container = document.getElementById(containerId); container.innerHTML = `<p class="text-red-500">Error loading audio. <a href="${audioUrl}" target="_blank" aria-label="Open audio in new tab">Open audio</a></p>`; } } // Toggle dark mode function toggleTheme() { try { debugLog("Toggling theme"); document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); debugLog("Theme toggled successfully"); } catch (e) { console.error("Error toggling theme:", e); debugLog("Failed to toggle theme: " + e.message); } } // Load theme preference function loadTheme() { try { debugLog("Loading theme preference"); const theme = localStorage.getItem('theme'); if (theme === 'dark') { document.documentElement.classList.add('dark'); } debugLog("Theme loaded successfully"); } catch (e) { console.error("Error loading theme:", e); debugLog("Failed to load theme: " + e.message); } } // Initialize on DOM content loaded window.addEventListener('DOMContentLoaded', () => { try { debugLog("DOM content loaded, initializing quiz"); loadTheme(); initQuiz(); } catch (e) { console.error("Error during DOMContentLoaded:", e); debugLog("Failed to initialize on DOMContentLoaded: " + e.message); document.getElementById('error-message').innerHTML = "Error initializing quiz. Please check the console for details or contact support."; document.getElementById('error-message').classList.remove('hidden'); } }); </script> </body> </html>" frameborder="0" width="100%" height="2000px">